mouseOver behavior won't look the same in two buttons that are the sam

[photoxprt1868]

Hello,

I have a list of bulleted buttons. In the style sheet, I have no decoration on the active stage, and underline on the hover stage. However, only some buttons underline, and others don't. It's even inconsistent from my local drive to the production server. This thing has a mind of its own. What can i do?

Here's some code

.homeBottomBuckets a:link{
font:Arial, Helvetica, sans-serif;
font-size:10pt;
text-decoration:none;
color:#004D71;
}

.homeBottomBuckets a:hover{
font:Arial, Helvetica, sans-serif;
font-size:10pt;
text-decoration:underline;
color:#0066FF;
}

.homeBottomBuckets a:visited{
font:Arial, Helvetica, sans-serif;
font-size:10pt;
text-decoration:none;
color:#004D71;
}

The class homeBottomBuckets is applied to the table that sorounds these bullet links.

Thank you

 

[cLFlaVA]

read this:

http://www.w3schools.com/css/css_pseudo_classes.asp

note the order that is required.

*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
beware of active imagination: [URL unfurl="true"]http://www.coryarthus.com/[/url]

BillyRayPreachersSonIsTheLeetestHax0rDude

 

[ChrisHunt]

Yeah, when a conflict appears, browsers will give precedence to the latest rule in the style sheet - so if you have a link that's visited, and you hover over it, the browser will apply the visited rules over the hover rules from your sheet because they're later.

You also don't need to redefine every rule for every pseudo class, just the ones that change, so do it like this:

.homeBottomBuckets a:link,
.homeBottomBuckets a:visited{
font:Arial, Helvetica, sans-serif;
font-size:10pt;
text-decoration:none;
color:#004D71;
}

.homeBottomBuckets a:hover{
text-decoration:underline;
color:#0066FF;
}

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd