Anchor pseudoclass issues in Internet Explorer 6

I’ve never come across this problem in all my years as a developer, and needless to say, it frustrated me no end.

Everyone knows the LVHA rule, or LoVe HAte (if they don’t, they should know that :link comes first, :visited next, :hover next, and :active last. The order they come in matters, so don’t forget!)

Sometimes, I have to do complex buttons; this often means having a <span> element inside the anchor, with specific styling for it during hover etc.

This is where the issue comes in. In the following code:

a:link,
a:visited { background-color: #fff;
    color: #585858; }

a:link span,
a:visited span { zoom: 1.0; /* triggering hasLayout so in IE 6 the background colour actually shows */
    display: block;
    background-color: #4ff;
    cursor: pointer; }

a:focus span,
a:hover span,
a:active span { background-color: #33f;
    color: #fff; }

Shouldn’t be anything wrong with that code, right? :link are unvisited links, :visited are visited links, that covers all anchors. The special hovering is only for <span>s. Works in standards-compliant browsers.

In IE, though, the background colours don’t change. Not while the link is still unvisited. Once they’re visited, they work fine. Why? No idea. But if you add rules for :focus, :hover, and :active (to “underride” the ones defined for the <span>):

a:link,
a:visited { background-color: #fff;
    color: #585858; }

a:focus,
a:hover,
a:active { color: #595959; }

a:link span,
a:visited span { zoom: 1.0; /* triggering hasLayout so in IE 6 the background colour actually shows */
    display: block;
    background-color: #4ff;
    cursor: pointer; }

a:focus span,
a:hover span,
a:active span { background-color: #33f;
    color: #fff; }

The “underridden” rule must not be identical (must be different by some amount, and it doesn’t seem to matter which property, as long as it differs slightly.) I’ve changed the colour from #585858 to #595959 and suddenly, it works. Change them to the same colour value and it stops working.

I’ve been sick and have a headache so this post may sound incoherent, but I hope it makes sense. And is useful.

This entry was posted in techthings and tagged , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *