Geek Answers Handbook

CSS: Failed to override inherited text-decoration property

I am going to use a CSS table like this 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 when you try to apply it to a document

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

I found an unexpected behavior: the link text always remains underlined. What am I doing wrong? Could this be browser dependent (I'm using Mozilla Firefox 3.5.6, maybe IE 6.0 displays it correctly)? If so, how can I rely on CSS in general? What should I use to replace it?

(Actually, as a rule, I quickly mastered new programming languages ​​and never experienced programming problems until I started working with HTML and CSS. Either I am incompatible with it or its functions have never been retold quite well.)

+7
html css
source share
4 answers

After playing quickly with some CSS, a workaround (which is terrible but works) was to do the following in your CSS:

 .menu span {text-decoration:underline;}

... instead of the first line of your CSS sample. Then in 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>

This is far from ideal, but it is the best I can think of at the moment.

+2
source share

Make sure this is a valid link inside href. If you do not provide this style:

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

and href has no content, some browsers will not consider it as a link and will render the text by default. For example, <a href=""> will not accept the .menu a:link style, it will go to the default .menu styles because there is no link, and it does not appear as such by some browsers.

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

Also, make sure that you end these color styles with semicolons for the correct CSS syntax.

+1
source share

Have you tried adding:

 .menu a {text-decoration:none}

before all other rules? Just set the default value, which is then overridden by the a:hover rule.

0
source share

In the text you want to underline, use <u>blabla</u> (do it in the HTML way). This is not inherited, and your next link will not be underlined.

-one
source share

More articles:


All Articles