Tell me more ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.
up vote 0 down vote favorite

Here is my site: http://dosrevival.com

I can't seem to get the links to stop turning purple after being clicked in Chrome and IE (works in some Firefox versions?!?). In my CSS file I'm changing the a:link and a:hover 'color' to white and the 'text-decoration' to none or underlined as necessary. What's making Chrome throw this back up? Thanks!

share|improve this question
HTML/CSS questions are a better fit on Doctype – John Conde♦ Jan 27 '11 at 16:11

closed as off topic by John Conde♦ Jan 27 '11 at 16:11

Questions on Webmasters Stack Exchange are expected to relate to webmastering within the scope defined in the FAQ. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about closed questions here.

2 Answers

up vote 2 down vote

Check out this link
http://blogs.x2line.com/al/articles/159.aspx

Basically you need something along these lines

a:link              { color:red; }
a:visited           { color:green; }
a:hover             { color:blue; }
a:active            { color:orange; }

Notice that I didn't put purple in there. You can see each color in the life cycle of the click process.

ALSO

It is VERY important that you put them in the proper order. Link, Visited, Hover, Active

share|improve this answer
3  
I've looked at the CSS and the link specification is in fact in the wrong order. The way that I learned to remember it was with LoVe HAte. Link, Visited, Hover, Active. – bogeymin Jan 27 '11 at 12:37
1  
The link in the comment of the Adobe blog has the best explanation IMO: meyerweb.com/eric/css/link-specificity.html – Lèse majesté Jan 27 '11 at 13:11
up vote 2 down vote

Be sure to check the specifity. Sometimes you might have set a:visited for whole Body, or just a general redefine, so it has more weight. I often just use a parent id (IDs have more weight than classes) like #container whateverClasss a:visited {color:#000;} . Adding a !important; might also work, but imo is worse. Keeping an order in general is best.

share|improve this answer
3  
Yes, you should just use order. Use !important only as a measure of last resort since it can seriously inhibit the maintainability and comprehensibility of your CSS. Using it out of laziness or to avoid proper debugging/planning is a bad habit. – Lèse majesté Jan 27 '11 at 13:30