Here is the [abbreviated] HTML:
<div class=“navigation”>
<li><a href=“index.html”>Home</a></li>
</div> <!-- close navigation div–>
Here’s the CSS:
.navigation {
font-size: 16px;
color: #333333;
font-weight: bold;
text-decoration: none; /*is not working */
background-color: pink; /*just to show its box */
}
when I try “line-through” for the text decoration value, it does that, but when I try “none”, the underlining does not go away.
What am I doing/not doing?
Thanks!
Polly
can I see your whole CSS file? I suspect that lower down in your CSS file is something else that is over-writing the rule above it…
As zombieguy said, it’s probably something else cascading down. The most specific rule is implemented, so you could add a new CSS rule:
.navigation a
{
text-decoration:none;
}
That should sort it.
Also, you should really put your <li> element within an <ul> element.
That was my css file! [g!] I’m learning as I go along in Lloyd’s book.
I copied Narshada’s text decoration line into my text, and it worked!
I had a space between the colon and “none”, and Narshada didn’t.
Narshada, if I use “ul” I get bullets, and I don’t want those. And what is the “a” in your suggestion?
I really am a beginner.
Thanks both for answering!
A is the link tag, as in <a href=“somepage.htm”>somewhere.htm</a>
You can remove the bullets in a menu list by including
#navigation ul {
list-style-type:none;
}
To make the removal of underlining very specific to the nav section, you’d have
#navigation ul li a {
text-decoration:none;
}
(I tend to have an id rather than a class as there is usually only one menu on the page)
Obviously you’d have more styles than just those given for these definitions of course…
Hi 
text-decoration only applies to elements that have text inside of it directly (I assume). .navigation doesn’t seem like an appropriate name for that as it is usually an unordered list.
That’s why it won’t work.
Cheers.
Yeah, were going to have to see the full CSS document. This way we can see what’s really going on inside the page. Except part’s of it.
Though it’s more common to have one instance of a navigation element, which should indicate the use of an ID, not a class ( let’s avoid classitus - before your edit ).
His code is a class. ^
Yeah, I meant to direct it toward him… beh.
The reason is that all browsers (to my knowledge) declares text-decoration:underline for links in their user agent style sheet. And the text-decoration is not inherited (although it applies to descendant boxes too).
In other words, there’s a rule like this one in the browser’s built-in style sheet,
a:link, a:visited {text-decoration:underline}
According to the rules of the cascade, you’ll have to override that with a rule that applies to the same elements, e.g.,
.navigation a {text-decoration:none}
The line-through decoration applies because text-decoration is applied to all descendant boxes (the li’s and the a’s, for instance). And text decorations are additive; you can specify more than one text decoration for an element.
So the browser is changing my CSS rules on me!
Makes perfect sense; thanks a lot!
Polly
LOL 
It’s more a question of you not shouting loud enough to override its built-in rules.
I’ll make sure to yell louder next time!
In all seriousness, particularly that now I know browsers can do that.
Thanks!
Polly