Why won't my visited link have a background color?

Question

It seems that a:visited won\'t work in showing background color on my links.

http://jsfiddle.net/davestein/D2srA/

What super simple thing am I missing?

Answer 1

it doesn't work for me if I do it like you do. But if I add every pseudo-class it works. E.g.:

a:link {color:#FF0000;}      /* unvisited link */
a:visited {color:#00FF00;}  /* visited link */
a:hover {color:#FF00FF; background-color:black;}  /* mouse over link */
a:active {color:#0000FF;}  /* selected link */

Answer 2

I'm not sure of the technical reason here, but this only seems to work for me if I add a background-color for a:

a { background-color: #ffffff; }

a:visited { background-color: #ff0000; }

Answer 3

try a) setting a default background color (like #fff) and b)removing !important, as shown here:

http://jsfiddle.net/D2srA/10/

Answer 4

The background-color on a:visited only seems to work (as Dave said above, in FF, Chrome and Safari) if the normal a has a background-color, either explicitly defined or through inherit (the direct parent must actually have a background-color for this to be true).

Obviously it is not ideal to have to define a background-color for a all the time, as the site may have a background image.

CSS bug..?

Answer 5

!important always does the truck

a:active {color:#0000FF !important;}
a:visited {color:#0000FF !important;}