Inconsistent link behavior

[gstick]

I have had some trouble getting IE & FF to perform consistently with the hover pseudo-class. First IE works but FF does not. The the reverse happens with FF working but not IE.

I did a simplified test using the following code:

#lp a{display: block; background-color: #ffc; color: #009;}
#lp a:visited {background-color: #fff; color: #063;}
#lp a:hover{background-color: #063; color: #fff;}

FF hovers nicely but IE does not respond.

Is there a secret that I am missing?

[Robin_reala]

You seem to be doing the right thing, so I’d guess it’s hasLayout [webmasterworld.com] coming into play for IE. In IE5&6 setting display:block on a link won’t increase the actual ‘hotspot’ for hovering beyond the text unless the element has hasLayout. There are many ways of forcing an element to gain hasLayout but quite often simply giving it a width works. If a width isn’t appropriate then I generally use zoom:1. It’s invalid, but unlikely to be used by the standards in the future and is nice and simple.