Jump to content

a:visited sprite not working in Firefox or Chrome


Recommended Posts

This is a very simplified page to show a navbar where the current page tab is highlighted and the other tab shows normal, visited, hover and active states. IE7 and Opera do show the lime green text in the sprite for the visited state but Firefox 4.01 and Chrome don't. Why not?




Click on the About Us tab, and when on that page click on the Home tab to return to the Home page. You will see that the About Us tab has green text in IE7 and Opera but not in Firefox 4 or Chrome.


The white normal and yellow hover states show correctly and the visited part of the sprite is between the normal and hover parts of the sprite, but the y position -26px isn't working in Firefox or Chrome.


These are the sprites:-




I know the quality is bad, it's just a basic example to find out what's wrong.

Link to comment
Share on other sites

I'll look into a pixi rollover but I was experimenting with text in the background-images instead of text links. I will probably use other images but these sprites were just an example. I just came across this problem in Firefox and Chrome which seems odd because the code validates and the order of normal, visited, hover, active is what is usually recommended so I'm baffled.


The text links are still needed for screen readers and have text-indent: -9999px; to offset them so sighted viewers don't see them.

Link to comment
Share on other sites

Pseudo selectors like :hover :visited etc don't have any CSS weight I think. So:


.siteNav2 #menuabout2 a


carries same weight in importance as:


.siteNav2 #menuabout2 a:hover




So ... if you put:


.siteNav2 #menuabout2 a:visited { color: red; }

.siteNav2 #menuabout2 a { color: black; }



the text will be black whether you visit it or not. The solution is to change the order simply.

Link to comment
Share on other sites

Changing the order doesn't make Firefox or Chrome show the visited state, although IE7 and Opera still do.


I've tried:- a a:link a:visited a:hover a:active


a:link a:visited a:hover a:active (without the basic "a" state, but IE needs the general "a" to set the base for the pseudo states).


a a:link a:hover a:active a:visited (which I'm sure is not the recommended order).


Firefox does show the hover state in all the above situations, so the -52px position of the sprite works for the hover but not the -26px position for the visited state, which is very odd.


I'm coming to the conclusion that it's just the way Firefox and Chrome work.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...