HTML/CSS: <a> tag CSS rules w/ pseudoclasses rendering inconsistently

Question

I've come across an issue lately with my web design projects that has been insignificant enough to slip through my fingers unfixed a few times, but it's just gotten too annoying.

Say I have a style sheet with these rules:

a {
    outline: 0;
    text-decoration: underline;
}

a:link {
    color: #0099FF;
}

a:visited {
    color: #0099FF;
}

a:hover {
    color: #FFFF00;
}

a:active {
    color: #33FF66;
}

Links in my document will only sometimes have the correct colors, but sometimes they will just be the default blue->purple links. I'm on a black background, so these look awful.

If I refresh the page, about half the time they will render correctly. This is happening in both Firefox and Chrome.

What's going on?

Answer 1

If you are currently developing your css, it is very possible that the browsers have a cached version of the wrong version of the style sheet, which would explain why your links don't display correctly.

Try the following : In your link to the css, add a query string with garbage values. This will force the re-download of the css and see if your rules apply consistently. If they do, then you know it is a caching problem. Leave the query string as is and your users will re-download the css. If not, then you have a css problem. Download firebug for firefox, check one of the links that doesn't display the right color and see what rules apply to it.

Here is how you would add the query string :

<link rel="stylesheet" type="text/css" href="style.css?v=3">