[CSS] a:visited:hover and IE

[branwen]

I have been having problems with getting a visited link to changed when hovered over in IE. It works just fine in Firefox. When I look at it in IE, the hover works before it is visited, but not after. Here are some snippets of code from different links:

.nav a { margin: 0px; text-decoration: none; color: #FFFFFF; font-weight: bold; }
.nav a:hover { margin: 0px; text-decoration: none; color: #FDE892; font-weight: bold; }
.nav a:visited:hover { margin: 0px; text-decoration: none; color: #FDE892; font-weight: bold; }
.nav a:visited { margin: 0px; text-decoration: none; color: #FFFFFF; font-weight: bold; }


<--and another snippet-->

a.bl { margin: 0px; text-decoration: none; color: #FFFFFF; font-size: 10pt; font-weight: bold; }
a:active.bl { margin: 0px; text-decoration: none; color: #FFFFFF; font-size: 10pt; font-weight: bold; }
a:hover.bl { margin: 0px; text-decoration: none; color: #CF3600; font-size: 10pt; font-weight: bold; }
a:visited:hover.bl { margin: 0px; text-decoration: none; color: #CF3600; font-size: 10pt; font-weight: bold; }
a:visited.bl { margin: 0px; text-decoration: none; color: #FFFFFF; font-size: 10pt; font-weight: bold; }

<---and another...---->

a { color: #F36D00; font-weight: normal; }
a:hover { color: #F7B942; font-weight: normal; }
a:visited:hover { color: #F7B942; font-weight: normal; }
a:visited { color: #F36D00; font-weight: normal; }


None of them seem to hover visited in IE.
Thanks for any help!!!!

 

[Rowan W]

Visited comes before hover in the CSS.

a:link
a:visited
a:hover

 

[StudioWorks]

go to alistapart.com if you have more problems with CSS and links.

 

[df-sean]

Easy trick to remember the order of these pseudo-classes is:
LoVe HAte
(Link, Visted, Hover, Active)

They need to go in that order or CSS's natural cascading will cause for example "link" to supercede "visited" if you put link after visited. Just put 'em in LoVeHAte order and you'll be fine.

 

[branwen]

Thanks, everyone!

 

[df-sean]

Anytime