hover color not working after a "back" in IE 2

[gtbikerider]

The hover colors in this page behave unexpectedly

http://www.redleaf.co.uk/optima/template.htm

...notice that all links in the navigation (left) show pink when you hover, now click any link, then use back to return to the above URL. The pink hover no longer works for the link you just visited in IE6.0.2800.1106 - is this an IE anomoly or is there a way around this?



--
John

http://www.redleaf.co.uk

http://www.fusedocs.com

 

[ChrisHunt]

It looks like when you go [Back] in IE6, the link you left is considered :active, and the :active style takes precedence over :hover. Try removing the [tt]a:active[/tt] rule from your stylesheet altogether, it doesn't appear to be doing anything for you anyway.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[gtbikerider]

I never knew IE behaved like that in respect to hover - but you were right, Thanks

--
John

http://www.redleaf.co.uk

http://www.fusedocs.com

 

[theEclipse]

you can also put the :hover below the :active and :visited declarations in your styles. Ex:

a {color:#fff000;}
a:visited {color:#ff0000;}
a:active {color:#00ff00;}
a:hover (color:#0000ff;}

This is because styles are parsed top to bottom, and the last applying style is the one that is used. So, with that example, the only time the link will be yellow (FFF000) is if the mouse is not over it, the link has not been clicked, and the user has not been to the link previously.

But that is just a guess, as your example page doesnt seem to work ;-)

Robert Carpenter
/b{2}|!b{2}/ - that is the question...

http://www.toyboxhosting.com

robert@convertingchaos.com

http://www.convertingchaos.com

 

[gtbikerider]

Ah...that's the ideal solution - I must remember..
link - visited - active - hover


--
John

http://www.redleaf.co.uk

http://www.fusedocs.com

 

[Vragabond]

Just a note. While you remember that, you're going against W3C Standards recommendations that states pseudo classes should be written in order like you had them before:
:link
:visited
:focus
:hover
:active

 

[theEclipse]

Curious, whats the difference between :focus and :active?

Robert Carpenter
/b{2}|!b{2}/ - that is the question...

http://www.toyboxhosting.com

robert@convertingchaos.com

http://www.convertingchaos.com

 

[ChrisHunt]

:focus fires when an element has the input focus, eg. when the cursor is in an <input> element. In theory it could fire on <a> elements as you tab between them, though I'm not sure that it should, and know that it doesn't in IE6.

:active fires when you're actually clicking (or pressing enter, I suppose) on an <a> element, while you're waiting for the new page to load. Apparently, in IE, it's still firing when you use the [Back] button to come back to the page.

Incidentally, "link-visited-hover-active" is not a W3C Standard. It's just that, since an element could be simultaneously subject to link or :visited) and :hover and :active, that's generally the best order if you want all the rules to be applied. Actually, "visited-link-hover-active" would work just as well, since an <a href> can't be :link and :visited at the same time. However the conventional order lends itself to this mnemonic:

LoVe - HAte

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[Vragabond]

This is what W3.org has to say:

Note that the A:hover must be placed after the A:link and A:visited rules, since otherwise the cascading rules will hide the 'color' property of the A:hover rule. Similarly, because A:active is placed after A:hover, the active color (lime) will apply when the user both activates and hovers over the A element.

I think I will follow their note.