[RESOLVED] Link color change doesn't work after clicking on link

[hadoob024]

I can't figure this one out. I've googled some stuff and looked at a ton of CSS stuff and can't see where the problems are. Here's my page:

http://www.ofre.com


Once you visit the site, when you hover over a link I've applied color changes. However, once you visit a particular page, if you hover your mouse over that page's link, the color change doesn't seem to work. Here's my CSS:

<style type="text/css">

html
{ font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
font-weight: normal;
color: #000000 }


td
{ font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: normal; }


a.red {color: blue; font-weight: bold; text-decoration: none; padding-left: 3px; padding-right: 3px}
a:hover.red {color: #990000; font-weight: bold; background-color: #FFFF66; padding-left: 3px; padding-right: 3px}
a:visited.red {color: blue; font-weight: bold; text-decoration: none; padding-left: 3px; padding-right: 3px}


a { text-decoration: none; color: blue}
a:hover { text-decoration: none; color: #990000}
a:active { text-decoration: none; color: #FFFFFF }
a:visited { text-decoration: none; color: blue }

</style>


And then here's the code that I use on the menu in question:

<a href="http://www.ofre.com/aboutus.php" class="red" title="OFRE About Us">About Us</a> &nbsp | &nbsp <a href="http://www.ofre.com/searchlistings.php" class="red" title="OFRE Search Listings">Search Listings</a> &nbsp | &nbsp <a href="https://www.ofre.com/addlisting.php" class="red" title="OFRE Add Listing">Add Listing</a> &nbsp | &nbsp <a href="http://www.ofre.com/hotlist.php" class="red" title="OFRE Hot List">Hot List</a> &nbsp | &nbsp <A href="http://www.ofre.com/ofrenewslettersmain.php" class="red" title="OFRE Newsletters">Newsletters</A> &nbsp | &nbsp <A href="http://www.ofre.com/industrynews.php" class="red" title="OFRE Industry News">Industry News</A> &nbsp | &nbsp <A href="http://www.ofre.com/userfeedback.php" class="red" title="OFRE User Feedback">User Feedback</A> &nbsp | &nbsp <a href="http://www.ofre.com/extras.php" class="red" title="OFRE Extras">Extras</a> &nbsp | &nbsp <a href="http://www.ofre.com/contactinfo.php" class="red" title="OFRE Contact Information">Contact Info.</a> &nbsp | &nbsp <a href="http://www.ofre.com/ofrenews.php" class="red" title="OFRE News">OFRE News</a> &nbsp | &nbsp <a href="http://www.ofre.com/as_seen_in.php" class="red" title="OFRE As Seen In">As Seen In</a> &nbsp | &nbsp <a href="http://www.ofre.com/sponsorships.php" class="red" title="OFRE Sponsorships">Sponsorships</a> &nbsp | &nbsp <a href="http://www.ofre.com/testimonials.php" class="red" title="OFRE Testimonials">Testimonials</a> &nbsp | &nbsp <a href="http://www.ofre.com/sitemap.php" class="red" title="OFRE Site Map">Site Map</a>


Any thoughts???

[Centauri]

Link styles must be declared in the order of :link :visited: :hover :active - as your visited style is declared after the hover, it takes precedence.

[hadoob024]

THANKS!!! That did it. Weird, I've read through several CSS guides and NO WHERE is the importance of ordering mentioned. Thanks a bunch!!!

[WebJoel]

I'm really trying to include ":focus" with my LVHA, to include non-pointer tool access (like using TAB keys for "focus" and that would include cellphones too I guess..).

a {} /* for general links */
a:link {...}
a:visited {...}
a:hover {...}
a:focus {...}
a:active {...}

or “Lord Vader's Handle Formerly Anakin” (as suggested by Matt Haughey). If you're a STAR WARS fan, this makes sense.. :D