Cannot undo text-decoration for child-elements

Question

Say you have this html:

<a href="#">     This is underlined     <span>         This isn't.     </span> </a> 

And this css:

a:hover {     text-decoration: underline; /* I know, this is enabled by default. */ }  a:hover span {     text-decoration: none !important; } 

Why does the a > span element still has an underline. I'm pretty sure you should actually have undone the decoration by using 'none'. I know that you can achieve the result I want by using this:

<a href="#">     <span class="underlined">         This is underlined     </span>     <span>         This isn't.     </span> </a> 

plus this css:

a:hover {     text-decoration: none; }  a:hover span.underlined {     text-decoration: underline; } 

But... it just doesn't make sense to me why you can't unset the text-decoration of a child-element. So, why...?

Edit: Inline-blocks

According to @amosrivera, it does work when you use inline-block. I can confirm this to work in Safari and Chrome!

a:hover span{     text-decoration:none;     display:inline-block; } 

As mentioned, this works for Safari and Chrome, but not for Firefox. The following solution works for Firefox, but not for Safari and Chrome...

a:hover span{     text-decoration:none;     display:block; } 

Little table:

    CSS-Rule            |    Webkit    |    Firefox    |    Opera    |    IE     -------------------------------------------------------------------------------- display: block;         |       x      |               |      ?      |     ?     display: inline-block;  |              |       x       |      ?      |     ? 

Answer 1

It has to do with the fact that span is an inline element. Try this:

a span{     text-decoration:none;     display:inline-block; } 

Online demo: http://jsfiddle.net/yffXp/

UPDATE

In FF (4?) only display:block works (which at the same time in webkit doesn't), causes line break.

UPDATE 2 (hack?)

a span{     display:inline-block;     background:#fff;     line-height:1.1em; } 

Overlaying the white background over the border is not pretty but it seems to do it. It works in every browser other than IE 6,7

Online demo: http://jsfiddle.net/yffXp/6/

Answer 2

There might be some incredibly zany cross-browser way to do it, but I'd just go with this (a variation of the solution in your question), for the sake of sanity:

It just works: http://jsfiddle.net/KrepM/1/

HTML:

<a href="#">     <span>This is underlined</span>     This isn't. </a> 

CSS:

a:hover {     text-decoration: none }  a:hover span {     text-decoration: underline }