CSS: Could not override inherited text-decoration property

Question

I'm going to use such CSS table for my menu:

.menu {text-decoration:underline;}
.menu a:link {text-decoration:none; color:#0202C0}
.menu a:active {text-decoration:none; color:#0202C0}
.menu a:visited {text-decoration:none; color:#0202C0}
.menu a:hover {text-decoration:underline; color:#0099FF}

but while trying to apply it to the document

<span class="menu">
   Some underlined text came here... 
   <a href="...">this text should not be underlined until mouse on!</a>
</span>

I found unexpected behavior: link text always stay underlined. What I'm doing wrong? Could it depends on browser (I'm using Mozilla Firefox 3.5.6, probably IE 6.0 display it properly)? If so, how can I rely CSS at all? What should I use to substitute it?

(In fact usually I got learned new programming languages very quickly and never had any problems with programing basis until I started HTML and CSS. Either I'm incompatible with it or its features was never recounted well enough.)

Answer 1

Have you tried adding:

.menu a {text-decoration:none}

before all the other rules? Just to establish a default which is then overridden by the a:hover rule.

Answer 2

Increase the "weight" of the selector by adding more parent elements before it:

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

Increasing the weight should remedy the issue...

.menu {text-decoration:underline;}
body .menu span a:link {text-decoration:none; color:#0202C0}
body .menu span a:active {text-decoration:none; color:#0202C0}
body .menu span a:visited {text-decoration:none; color:#0202C0}
body .menu span a:hover {text-decoration:underline; color:#0099FF}

Answer 3

I'd recommend using the Firebug plugin for firefox, it's a lifesaver! This will let you see which styles are being applied to your elements.

Answer 4

Remove .menu { text-decoration:underline } I would suggest the alternative:

.menu a { text-decoration:none; color:#0202C0 }
.menu a:hover { text-decoration:underline; color:#0099FF }

Answer 5

Ensure that it is a valid link inside of the href. If you do not supply this style:

.menu a, .menu a:link{my styles}

and the href has no contents, some browsers will not treat it as a link and do default text rendering. For example, <a href=""> will not take on the style of .menu a:link, it will go to the default .menu styles because there is no link and it is not rendered as such by some browsers.

Of course, cover your bases by including the bare a in your selector.

Additionally, make sure you end those color styles with semicolons for proper CSS syntax.

Answer 6

After a quick play with some CSS, a workaround (which is horrid, but does work) would be to do the following in your CSS:

.menu span {text-decoration:underline;}

... in place of the first line of your sample CSS. Then in the HTML do the following:

<span class="menu">
    <span>Some underlined text came here...</span>
    <a href="...">this text should not be underlined until mouse on!</a>
    <span>Some more underlined text came here...</span>
</span>

It's far from being perfect, but is the best I can come up with for the moment.

Answer 7

Have you tried this?

.menu {text-decoration:underline;}
body .menu span a:link {text-decoration:none; color:#0202C0}
body .menu span a:active {text-decoration:none; color:#0202C0}
body .menu span a:visited {text-decoration:none; color:#0202C0}
body .menu span a:hover {text-decoration:underline; color:#0099FF}