a: hover color strangeness

color is not showing up as specified

[peteej]

I'm experiencing some erratic behavior with the hover property. The code below sets the link hover color to white with a dark blue background, no undeerline. Sometimes the effect works, sometimes it doesn't. Opera has no problem at all, however, IE and Firefox are reacting unusually, like recognizing it on some links and not others, or none at all. It defaults to the dark green color set in the a:link property.

Here's the css:

a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #003300;
text-decoration: none;
}

a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
text-decoration: none;
background-color: #003366;
}

a:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #CCFFFF;
text-decoration: none;
background-color: #003366;
}

a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #003300;
text-decoration: none;
}

.navHeads {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
color: #FFFFFF;
text-align: left;
width: 156px;
margin: 4px 0px 4px 4px;
}

.navItems {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
font-weight: normal;
background-color: #CCFFCC;
text-align: left;
width: 150px;
padding: 2px 6px 2px 4px;
margin: 0px 0px 1px 0px;
}

And an instance of HTML:

<div class="navHeads">Ordering Information</div>
<div class="navItems"><a href="http://www.example.com/index.html">Order Now! </a></div>

Does it have something to do with the way links are interpreted on different browsers or am I doing something wrong? Is there anything conflicting?

Thanks in advance.

[edited by: jatar_k at 2:13 pm (utc) on Aug. 5, 2005]
[edit reason] examplified [/edit]

[encyclo]

The problem is probably to do with the order of your CSS rules. They should be in the following order:

:[b]l[/b]ink
:[b]v[/b]isited
:[b]h[/b]over 
:[b]a[/b]ctive

Or LoVe HAte. :)

[peteej]

Thank you encyclo! Once again, the Webmaster World community has solved another problem. Thanks!