CSS help please

[bigperm]

I want to have the links on my navbar get their style from a different class than the main ones for all the other links, so I have this in my stylesheet:

A:link.nav {
color: white;
background-color: navy;
font-family: verdana;
font-size: 10pt;
text-decoration: none}

A:hover.nav {
color: navy;
background-color: grey;
font-family: verdana;
font-size: 10pt;
color: red;
text-decoration: underline}


A:visited.nav {
color: grey;
background-color: lightblue;
font-family: verdana;
font-size: 10pt;
text-decoration: none}

A:active.nav {
color: grey;
background-color: navy;
font-family: verdana;
font-size: 10pt;
text-decoration: none}

That is for my nav links. But for some reason, only the first one (a:link.nav) get used, and all the other ones are from the styles from the main links. The code for the main link is:

A:link {
color: #ff7d00;
text-decoration: none}

A:visited {
color: red;
text-decoration: none}

A:active {
color: yellow;
text-decoration: none}

A:hover {
color: red;
text-decoration: underline}

Anybody know why this is? Or how to fix this?
You can see it at http://www.yupapa.com/~bigperm/test1.shtml

[polestar]

I think you need to set it out either:

A.nav:link {color: #33ccff; text-decoration: none}

OR

nav A:hover {color: #FFFF00; text-decoration: underline}

Both ways work for me, but not A:hover.nav like you used. In your case it's ignoring the .nav and just applying the first style to all links.

I also use class=nav for my navbar links. The link's in my sig if you wanna look.

[bigperm]

nav A:link did not work for me at all, but A.nav:link did the same thing as A:link.nav did, just used the first one, but for hover, active and visited, they were drawm from the main ones.

Any other ideas?

[meow]

Yeppers. "hover" and so on are pseudo classes and comes last, after the class.
Example:
a.nav:hover

You also (for some reason I don't know) have to state the rule for hover last or it won't always work. Like so:

a:link
a:visited
a:activ
a:hover

[bigperm]

Ok, I changed them all to a.nav:link and then I found out one of my problems, and that is that there are two color: tags in my hover class. So, I deleted the red one, since that wasn't the one I want, and now when I hover over them, the links go navy, but the background color stays the same...

I am still working on THAT one.

It seems like the entire background-color thing does not work on the hover psuedo class.

[bigperm]

OK, I have it working now... thanks guys.

[meow]

Just a note, bigperm.
Colors and CSS is a tricky thing. Even if the background is supposed to stay the same, make a rule of always specifying background-color each time you use color and vise versa. For the same background you can use background-color: transparent. You can be in for nasty surprises otherwise.
Use this. It helps. :) http://www.htmlhelp.com/tools/csscheck/

[bigperm]

You would think that CSS would be pretty straight-forward, but then you write it, and something doesn't work, and you have no idea what is going on. Thanks for that link, it helps a lot.

[meow]

Glad to be able to be of service, big*perm. :D
If you are new to CSS, just wait until you discover the browser bugs. #¤5&¤#%!!!!
BTW get the CSS1 reference from the WDG site too. Handy.