Embedded CSS properties = unpredictable results

[ternto333]

I have embedded spans with different properties which looks like this:

<span style="font-weight:bold;color:green;text-decoration: underline">
This is bold, green, underlined text
<span style="color:#617094;text-decoration: none;font-weight: none;">
this is gray, underlined bold text
</span>
</span>

I would like the embedded span tag to overwrite the parent span properties, but maybe I don't understand the CSS priorities. It just doesn't make sense why it would overwrite the color of the text, but not the underlining or bolding. This was done on both IE 6, Firefox 2, and Opera.

[kelly23]

It does overwrite the font-weight setting (should be font-weight: normal not font-weight: none), but not the underlining for some reason.

[ternto333]

Thanks the normal font-weight did get the inner text non-bolded. The problem with the underline remains though. It's giving me this ugly green underline that I can't seem to get rid of with CSS

[WebJoel]

Why would you want or need to nest such an inline element inside of another, identical inline-element? Easier to just say:

<p><span style="font-weight:bold;color:green; text-decoration:underline;"> This is bold, green, underlined text</span><span style="padding-left:20px; color:#617094; text-decoration: none; font-weight:normal;">this is gray, non-underlined bold text</span></p>