...

View Full Version : CSS & Mozilla - .hover not working



Cryton
01-04-2003, 04:34 PM
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

Kiwi
01-04-2003, 06:42 PM
Is your link in a table?

Cryton
01-04-2003, 06:47 PM
Yes the links are in a table.

pardicity3
01-04-2003, 07:28 PM
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?

jkd
01-04-2003, 07:31 PM
I don't believe classes can begin with a number.

jkd
01-04-2003, 07:34 PM
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.

pardicity3
01-04-2003, 07:43 PM
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.

jkd
01-04-2003, 07:59 PM
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. :)

Cryton
01-04-2003, 08:09 PM
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!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum