Jump to content
Stef's Coding Community
Sign in to follow this  
Wickham

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?

 

http://www.wickham43.net/highlighthomecurrentspriteshort.html

 

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

http://www.wickham43.net/images/navbuttonhomesprite.jpg

http://www.wickham43.net/images/navbuttonaboutussprite.jpg

 

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

Share this post


Link to post
Share on other sites

Well I can not really help. But I would just use a pixi rollover and change the font on the active and hover in your css. What I mean is do not put the text on your img. I know you are way more advanced than me. So I know what you know what I am trying to say.

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
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

and

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

and

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.

Share this post


Link to post
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.

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

Loading...
Sign in to follow this  

×
×
  • Create New...