Welcome to WebmasterWorld Guest from 34.229.194.198

Forum Moderators: not2easy

Message Too Old, No Replies

Anchor pseudoclass issues in IE 6

     
3:48 am on Aug 28, 2008 (gmt 0)

Preferred Member

10+ Year Member

joined:Feb 28, 2005
posts: 646
votes: 0


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'm sick and have a headache so this post may sound incoherent, but I hope it makes sense. And is useful.

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members