Google chrome a:visited background image not working

Question

(before I start I should say yes, I have done all the stupidity checks, yes the link is in my history and has been visited etc)

I'm using Chrome version 6.0.472.63, although it's important that this works on all browsers.

It works on Firefox, IE and Opera.

Basically all i'm trying to do is change the background image of a link if the link has been visited.

I've done alot of trial and error testing so bare with me for multiple examples.

This is what I had originally

.forum_box .title a {
 background-image:url(../images/f_unread.png);
 background-position:10px center;
 background-repeat:no-repeat;
 background-color:transparent;
 color:#2D4054;
 font-size:14px;
 padding:10px 12px 10px 44px;
 text-decoration:none;
 display:block;
 font-weight:bold;
}
.forum_box .title a:visited {
 background-image:url(../images/f_read.png);
}

Works in every browser except Chrome. Next I tried just making it a colour rather than image.

.forum_box .title a:visited {
 background-color:red;
}

Same again, however I changed the link to #fff instead of transparent and the visited link changed red, so apparently the bg colour only works if you set a bg colour for the parent.

.forum_box .title a {
 background-image:url(../images/f_unread.png);
 background-position:10px center;
 background-repeat:no-repeat;
 background-color:#fff;
 color:#2D4054;
 font-size:14px;
 padding:10px 12px 10px 44px;
 text-decoration:none;
 display:block;
 font-weight:bold;
}
.forum_box .title a:visited {
 background-color:red;
}

However it still doesn't solve my image problem. So in one final attempt I tried this in the hope that for some reason Chrome would only work when the same properties where present in both.

.forum_box .title a {
 background:#fff url(../images/f_unread.png) no-repeat 10px center;
 color:#2D4054;
 font-size:14px;
 padding:10px 12px 10px 44px;
 text-decoration:none;
 display:block;
 font-weight:bold;
}
.forum_box .title a:visited {
 background:#fff url(../images/f_read.png) no-repeat 10px center;
}

That didn't work either and again continued to work on Firefix, Opera and IE. So I come here to Stack Overflow very confused.

Any help would be greatly appreciated!

UPDATE: I've attempted a jQuery solution, although it still doesn't work. Despite having :visited links and I can confirm their visited state by changing the font color to red. jQuery('a:visited').length returns 0.

Answer 1

You might need your single quotes around your img url... Browsers are funny about when they do care about quotes and when they don't....

Answer 2

It's probably a security issue.
Check this post on the mozilla security blog.
I can certainly imagine how they would do it.

Answer 3

Same problem here. Changing background-position in a CSS Sprite on a:visited is working for me in Firefox 3.6 but not in Chrome 6.

But probably soon it will stop working in Firefox too. (maybe for FF 4?)

It's a privacy problem, and you can read here a Mozilla article about it (March 2010) http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/ And the bug: https://bugzilla.mozilla.org/show_bug.cgi?id=147777#c160

I think only possible solution is to use creatively the background-color instead of images.

Answer 4

Chrome appears to have disabled css for :visited ( except for color ).

This would be to prevent the history sniffing exploit.

See http://www.azarask.in/blog/post/socialhistoryjs/