Wickham Posted June 15, 2011 Report Share Posted June 15, 2011 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. Quote Link to comment Share on other sites More sharing options...
grabenair Posted June 16, 2011 Report Share Posted June 16, 2011 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. Quote Link to comment Share on other sites More sharing options...
Wickham Posted June 16, 2011 Author Report Share Posted June 16, 2011 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. Quote Link to comment Share on other sites More sharing options...
BeeDev Posted June 16, 2011 Report Share Posted June 16, 2011 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. Quote Link to comment Share on other sites More sharing options...
Wickham Posted June 16, 2011 Author Report Share Posted June 16, 2011 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.