CSS: Could not override inherited text-decoration property

css, html

Solution

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.

Problem

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.)

Original source