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?

Solution 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">

Solution 2

Of course this is an old post, but I have been experiencing the same issues lately. After some hours searching, I finally realized that my markup was invalid because using the following syntax:

<a href="somlink"><i>my link text</i></a>

This renders perfectly in all browsers but of course the 'a' selector in my style sheet was not enough. In this case, I needed the following:

   a i, a:hover i, a:visited i
   {
       some rule....
   }

Hope this can help someone...

Comments

[BoltClock]

Try combining a:link, a:visited since they're the same color?

[Dave]

Other than maybe consolidating your :link and :visited together, the css looks fine. How are you including your css? It sounds like your page is sometimes loading the css file and sometimes not.

[Graham Clark]

Is it definitely just the <a> tags getting CSS applied inconsistently, or all elements?

[Martin Milan]

Get yourself the Firebug extension for Firefox - it's great for tracking down stuff like this...

[Luke Duddridge]

Could you tell me a bit more about the set up, do you have a farm of servers? Is it only the link colours that are being affected? or is there more styles that are reverting to a different/ default style?

[JakeParis]

Hugo, I thought that a browser will read style.css and style.css?ver=3 as different, but won't re-download the stylesheet when it comes across the same query string. Until you change it. Do you think differently?

[Pollux Khafra]

You are correct (as far as I know). You must change the query string if you want to invalidate the cache.

[JakeParis]

Oh good. I was worried for a moment that every site I built this year were reloading the css on every refresh. thanks.