CSS & Mozilla - .hover not working

I am designing a simple webpage. I am using the following CSS styling:

a.3dmenu {
color: #0000FF;
font-family: Verdana;
text-decoration: none;
font-size: 11px;
font-weight: bold;
font-variant: normal;
}


a.3dmenu:visited {
color: #000099;
}


a.3dmenu:hover {
color: #FF0000;
background-color: #FFFFFF;
text-decoration: none;
}


a.3dmenu:active {
color: #FF0000;
}


This works perfectly for IE. (When the user moves the mouse over a .3dmenu link, it goes red, rather than being underlined, and changes colour once it has been visited).

However, on Mozilla 1.2.1 this doesn't work at all. The items tagged with the CSS style .3dmenu just appear in a bog standard font. (Times New Roman I think)

Does anyone know why this happens and what I can do to rectify this problem?

Best wishes and thanks for reading this
Steve/Cryton

Is your link in a table?

Yes the links are in a table.

Maybe it's just me, and maybe I do it the wrong way, but I almost never put an "a" infront of my CSS. For example, instead of this:

a.3dmenu:hover

I just have:

.3dmenu:hover

It always seems to work for me in both IE and Mozilla. I don't know why it would make a difference but maybe you should give it a try?

I don't believe classes can begin with a number.

Originally posted by pardicity3
Maybe it's just me, and maybe I do it the wrong way, but I almost never put an "a" infront of my CSS.

tag.myclass is a syntactic shorcut for:
tag[class~=myclass].
This is only valid for HTML too - with any other XML markup, you should use the full version.

Therefore, a.myclass is more specific than .myclass because it only selects anchors that have that class applied, instead of all elements with that class. Perfectly valid.

Hah, forgot about that number thing!

One question jkd, what if I want to apply the same styling to say a div as well as a table cell. If I were doing it I would just have one class and not specify a tag:

.myclass {border: 1px #FFFFFF;}

then I could just do <td class="myclass"></td> and <div class="myclass"></div> instead off adding more code that is basically just repetitve. Obviously it's not that big of a deal, but if you had a lot of instances like this it might save a great deal of file size.

Originally posted by pardicity3
Hah, forgot about that number thing!

One question jkd, what if I want to apply the same styling to say a div as well as a table cell. If I were doing it I would just have one class and not specify a tag:

.myclass

is essentially:

*[class~=myclass]

So yeah, a class without a tag can be applied to any element.

If you still wanted to be specific:

div.myclass, table.myclass {
/* bla */
}

Is still specific, but only one rule definition. :)

Originally posted by jkd
I don't believe classes can begin with a number.
Big thumbs up, jkd! A mass find/replace and now it works beautifully in Mozilla. Thanks greatly!