Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS: Could not override inherited text-decoration property

Tags:

html

css

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

like image 278
Nick Avatar asked Jan 21 '10 16:01

Nick


People also ask

How do I remove the text-decoration in CSS?

By setting the text-decoration to none to remove the underline from anchor tag. Syntax: text-decoration: none; Example 1: This example sets the text-decoration property to none.

Which of the following is NOT used with text-decoration property?

Which of the following is not used with text-decoration property? Explanation: overline, underline, line-through properties are used to decorate the text. it will produce headings h1 with text having line-through, h2 with text having overline and h3 with text having underline. 5.

What is text-decoration in CSS?

The text-decoration shorthand CSS property sets the appearance of decorative lines on text. It is a shorthand for text-decoration-line , text-decoration-color , text-decoration-style , and the newer text-decoration-thickness property.


1 Answers

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.

like image 96
icabod Avatar answered Sep 21 '22 03:09

icabod