Mozilla - a href hover not working 1

[sknyppy]

I have a style defined for specific ahref's that works fine for IE but the hover style doesn't work in Mozilla 1++.

Any help with why it doesn't work in Mozilla and any work arounds would be great....

Here's my style snippet.
--------------------------
a.userDefinedTop:active
{
font-family: verdana,sans-serif; Color: #000000; font-weight: bold; font-size: 9px; text-decoration: none;
padding-left: 8px; padding-top:2px; line-height:22px;
background-color: #F4FCFF; border-color: #006699; border-style: solid; border-width: 1px;
}

a.userDefinedTop:visited
{
font-family: verdana,sans-serif; Color: #000000; font-weight: bold; font-size: 9px; text-decoration: none;
padding-left: 8px; padding-top:2px; line-height:22px;
background-color: #F4FCFF; border-color: #006699; border-style: solid; border-width: 1px;
}

a.userDefinedTop:hover
{
font-family: verdana,sans-serif; Color: #000000; font-weight: bold; font-size: 9px; text-decoration: none;
padding-left: 8px; padding-top:2px; padding-bottom: 4px; line-height:22px;background-color: #D9F4FF; border-color: #006699; border-style: solid; border-width: 1px;
}

a.userDefinedTop:link
{
font-family: verdana,sans-serif; Color: #000000; font-weight: bold; font-size: 9px;
padding-left: 8px; padding-top:2px; padding-bottom: 4px;
background-color: #F4FCFF; border-color: #006699; border-style: solid; border-width: 1px;
line-height:22px; text-decoration: none;
}

------------------------

Thanks....

 

[Vragabond]

I see a couple of problems. First, in order to not make pseudo classes cancel themselves out, you need to specify them in correct order. This is:
:link
:visited
:hover
:active
Browsers might or might not render correctly if the order is incorrect. I advise you change it and see if it makes a difference.

Second, you have to know that classes are case sensitive in Mozilla. Since you use userDefinedTop, you must call it exactly the same in your html: <a class="userDefinedTop">. If none of this solutions work, try giving us all your css and html.

Last but not least, make use of the inheritance within CSS. If you do not specify something explicitly, the class will inherit from the element. With pseudo classes, values are inherited from a previous class. Taking that into account, you can considerably cut your code:

a.userDefinedTop:link, a.userDefinedTop:visited
{
	font-family: verdana,sans-serif;
	color: #000000;
	font-weight: bold;
	font-size: 9px;  
	padding: 2px 0px 4px 8px;
	background-color: #F4FCFF;
	border: 1px solid #006699;
	line-height: 22px;
	text-decoration: none;
}

a.userDefinedTop:hover
{
	background-color: #D9F4FF;
}

 

[sknyppy]

Thanks Vragabond! That seemed to do the trick. I never realized that they needed to be in a specific order. I guess IE is a little more forgiving.

Another quick question... Is it possible to apply a fixed width or set the text-decoration to none with the 'userDefinedTop' element in Mozilla?

Thanks..

 

[Vragabond]

Text decoration set to none should already work in Mozilla. Since userDefinedTop is just a class, it depends to which element you are applying it. In your code, you are limiting it to <a> tags. <a> tags are by default displayed inline and inline elements cannot have a width specified. You could however, change the display of <a> tags to block and then apply the width. That would mean that every link will be in a separate row though.