12

(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 bear 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.

Jonathan Hall
  • 75,165
  • 16
  • 143
  • 189
John Mellor
  • 2,351
  • 8
  • 45
  • 79
  • That would be possible for instance I could do jQuery('.forum_box .title a:visited').addClass('visited') and then use the class for styling. But I assumed that there would be another solution rather than Chrome being inherently flawed on one of the oldest and most basic CSS properties. – John Mellor Sep 24 '10 at 16:05
  • I know this doesn't solve your problem right now, but you could always submit a bug... http://code.google.com/p/chromium/issues/entry – EJC Sep 24 '10 at 16:28
  • Have you tried using the Web Inspector to show what styles are being applied to the `a:visited` links? (Web Inspector: ctrl+shift+i, choose 'elements' and navigate to, and click on, the links in the elements pane). – David Thomas Sep 24 '10 at 16:39
  • Sorry not sure why I didn't reply to this earlier I must have got engrossed in something. Web Inspector doesn't show any of the visited styles, even color:red; which works fine doesn't show up (although it does show up in computed style). – John Mellor Sep 24 '10 at 17:24
  • Good question. Seems there's already a bug filed against Chrome: http://code.google.com/p/chromium/issues/detail?id=44043. You may want to add your confirmation there. – Heretic Monkey Oct 01 '10 at 20:57

5 Answers5

15

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.

corbacho
  • 8,762
  • 1
  • 26
  • 23
3

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

Knu
  • 14,806
  • 5
  • 56
  • 89
3

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/

dougwig
  • 31
  • 1
0

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....

EJC
  • 2,062
  • 5
  • 21
  • 33
  • That didn't make any difference but thanks for the suggestion! – John Mellor Sep 24 '10 at 16:37
  • Sorry it wasn't more helpful, this seems like a very odd issue. Like I said above, I would file a bug for it on the chromium web project and I would think they would fix something like this pretty quickly as it's basic html/css functionality. – EJC Sep 24 '10 at 18:52
0

This is done for security reasons, as it was possible to load a lot of different images and detect which links the user had visited, any property sending an specific request, or loading a specific resource, depending on what the user has visited is technically seen as a security issue, as it can leak personal interests of the user.

https://blog.jeremiahgrossman.com/2006/08/i-know-where-youve-been.html

Chris Russo
  • 450
  • 1
  • 7
  • 21