Link Issues, Why?

This is more of a curiosity then a problem?

I have a site that I'm trying to add link styles too. I've done this many times before but for some reason this isn't working.

This is the css for the links.

.nav {
	color:#fff;
	font-size:12px;
}

.nav a:link, .nav a:visited {
	text-decoration:underline;
}

.nav a:hover, .nav a:active {
	text-decoration:none;
}

Code (markup):

Here is the html:

<td colspan="3" bgcolor="#0F4B82"><div align="center"><span class="nav"><a href="#">Download our Brochure</a> | <a href="#">Download our products list</a></span></div></td>

HTML:

I know I can simplify the html, etc., I was just experimenting. BUT, for some reason the links are displaying as default color, text decoration, size, etc.

If I add the class directly to the link it works, but I never had to do that before.

Anyone know why this isn't working??

 

the way you have declared .nav is the problem. try using #nav and id enstead of class

 

What you're saying here:

.nav {
	color:#fff;
	font-size:12px;
}

Code (markup):

is only that normal text inside the span should be white and 12px. a's browser defaults will override that. It's the same if I have
<h1><a href=#">stuff</a></h1>
I can't just say
h1 {
color: #000;
text-decoration: none;
}
cause that's only referring to the h1 and anchors in this case do not inherit from the parent... this was probably deliberate cause people were accidentally overriding the browser defaults in the early days (just a guess).

Keeping your (yes, slightly bloated : ) HTML the same, you can affect the a this way:

.nav a {
	color:#fff;
	font-size:12px;
}

Code (markup):

This now specifically mentions the a which is inside the thing with the class of nav.

But instead of having that second declaration, let's do this:

.nav a {
	color:#fff;
	font-size:12px;
}
.nav a:hover, .nav a:active {
	text-decoration:none;
}

Code (markup):

Text decoration: underline is also a browser default, so no need to mention it... if you turned it off earlier and need to add it back in for link and visited, you stick it in the first declaration: a will give inherited properties to its children, meaning if you say
.nav a {
text-decoration: underline;
}

All the a's (a:hover, a:visited, etc) will have them until you specifically say otherwise.
This is why i find a:link rather useless... it's always easier to set all my defaults for a, and then only mention the ones I want DIFFERENT like a:hover.