Arriving back in the wee hours of this morning I took a look at some Toxic Drums web pages. To my amazement and distress I noticed there was something wrong with the web site. The problem was that a lot of the links (particularly in the generic "see also" link bar) had gained a black background.
I investigated and found that this only appeared using Google's "Chrome". All other browsers were displaying the web pages as they had always appeared. This was slightly consoling but still a major worry. Eventually I tracked this down to the way Google Chrome was interpreting the CSS (Cascading Style Sheet) info.
In short if the "link" pseudo-class actually specifies a background color then if the "visited" pseudo-class doesn't specify a background color then Chrome set the background colour to black. Quite where it ascertains the "black" value remains a mystery for me but I guess it could be arbitrary or a default within Chrome.
e.g.
.style4 a:link{color: #CC0000; background-color: #FFFFFF;}
.style4 a:visited{color: #6600FF;}
.style4 a:hover{color: #FFFFFF; background-color: #CC0000;}
the above used to behaves as expected with only the color changing if the link has been visited. Basically an anchor in style4 has red text on a white background for a link and the color changes to purple for a link that has been visited. The hover psuedo-class is kind of irrelevant to this issue. But the display behaviour seems to have changed in Chrome and now the "visited" links were appearing with a black background. A remedy was found by specifying the background color in the "visited" CSS psuedo-class as below.
.style4 a:link{color: #CC0000; background-color: #FFFFFF;}
.style4 a:visited{color: #6600FF; background-color: #FFFFFF;}
.style4 a:hover{color: #FFFFFF; background-color: #CC0000;}
On further investigation I also found that by removing the specification of the background color in the "link" and having no background color in the "visited" also did the job as illustrated below:
.style4 a:link{color: #CC0000;}
.style4 a:visited{color: #6600FF;}
.style4 a:hover{color: #FFFFFF; background-color: #CC0000;}
What I would be interested to find out is whether Google has got the interpretation of the CSS right and all other browsers are actually fudging things or has Google gone and made a mistake with their latest "update" of Chrome. It could be that the interpretation can go either way but I would like to know.
Subscribe to:
Post Comments (Atom)
Posts
I just reloaded Chrome after having un-installed it months ago and discovered the same issue. Unfortunately my code is such that I can't use your fix, because my visited background color is transparent!
ReplyDeleteP.S. At first I was wondering if it might be a CSS specificity issue, although that doesn't explain the black background. It also doesn't explain why MSIE, Opera, and Firefox don't exhibit this behavior. ... I wonder whether Chrome supports falling back and downloading earlier versions?
ReplyDeleteI'm coding a site and have been struggling with this issue FOREVER. Thank you for posting your observations; after searching for eternity, I finally stumbled upon your site, thanks.
ReplyDeleteIt's people like you that make people like me not want to throw in the towel.
You solved my problem. Thanks a lot. You are Genius !
ReplyDeleteThank you for writing this up. The bug is still there in July 2014! I was going crazy. I suppose most people put in all 4 link color specifications, but I was just learning and thought doing one at a time would be easier. Not so! I should have copied the entire code from my example.
ReplyDelete