We help IT Professionals succeed at work.

Rollover Link Color Works in IE NOT Firefox

Chi Is Current
Chi Is Current used Ask the Experts™
on
Hello ~ RE: http://wildmustard.net/index.html, I notice the rollover link colors change correctly in IE 8.0; HOWEVER, SOME of the rollover link colors do not change in Firefox 4.0.1(!).

Top and bottom links in the index table on the left change, 2 middle links do not.  Also "Contact" at the bottom of the page does not change.

I'd appreciate any insight!!!   ???

Best Regards, Jacob
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2008

Commented:
Hello there,

this is because of the visited state of the links. Every link you clicked on does not do the hover effect.
You need to either get rid of the a:visited definition in your stylesheet completely or move it above the a:hover entry in your CSS, that will do too.

bye,
Alex
Top Expert 2008
Commented:
Just as a short follow-up to my own posting because there still is no edit button for my own comments:

If you delete the a:visited definition, already visited links will show up in a different color because of the a:link definition in your stylesheet, but if you change "a:link" to just "a", that will be fixed too, so try the following snippet for your links in your stylesheet definition at the top of the page:

a {
      color: #FFE75E;
      text-decoration: none;
}
a:hover {
      color: #AE0000;
      text-decoration: none;
}
a:active {
      text-decoration: none;
}

Author

Commented:
agriesser ~

Thank you!  Your comment helped a lot.  The following works fine in both Firefox and IE.  In looking more closely, I think I deleted the: 'text-decoration: none;' line in the a:visited {declaration}.  I think that was the root cause of the original problem.

Thank you for your assistance and looking at this with new eyes.

Best Regards, Jacob

=========================================
a:visited {
      color: #FFE75E;
      text-decoration: none;
}
a:link {
      color: #FFE75E;
      text-decoration: none;
}
a:hover {
      color: #CC0000;
      text-decoration: none;
}
Top Expert 2008

Commented:
You're welcome! :)