Sprites BKGD position on Mac FF

[Digital Skraps]

I’m a huge fan of sprites. they’re by far the coolest thing I’ve run across in CSS in my opinion. there’s nothing like seeing all your menu items load at the exact same time and the rollover being seamless. But I have run across a problem.

I’m working on a site for a client that could potentially turn into a full time position. I used sprites for the navigation and after fixing it for IE6 it worked perfect in all browsers. Till my client looked at it in Mac FF. its off about 20px which is beyond odd bc its perfect in all other browsers. So I had them go to a site where I had used the exact code before and it’s doing the same thing.

This makes me terribly unhappy.
hopefully it’s something I’m doing because I Definitely want to keep using sprites.

problem is my best bud whos on a mac looked at it in his FF and its fine. but 3 macs at my clients office are all doing this.

so the plot thickens.

If you are on Mac and have FF.. please go to UniversalFairs.com and tell me if the menu items are off about 20px upon rollover.

If you have had this same problem or know a way to fix it that would be awesome.

Thanks for the help!

David Sparks
http://www.digitalskraps.com

[Hawke]

I have firefox and Windows XP, and the menu items are still about 20px off on rollover (the text get cut in half). So the problem isn’t MAC, it’s probably firefox…

EDIT: I don’t know what effect it’s suppose to give when you rollover (only color change ?), but on all the browser I tested, the text get cut in half :(! Was it the desired effect ?

[Digital Skraps]

Yeah I’m sorry. I should have been more specific. the 20px shift was to the left. On the site I linked to in the above post the effect was to have the letters disappear a bit.

so the pixel shift will be to the left (or right) not up or down.

sorry.

thank you for checking it out!

[Chris Coyier]

Hey David,

Mac FF 2.0.0.13 the rollovers look fine to me. They shift downward but it looks like that was the intended effect. Also looks fine in Safari and IE 6. Maybe it’s FF 1.5? Can you get a screenshot of the problem somehow?

[Hawke]

No problems.
Sorry I can’t help you anymore then, I don’t own a MAC. I could test on Opera and Conqueror when I get back home if you want tough :)

[Digital Skraps]

Thanks guys.

I tested it in all the browsers available to PC and old versions of IE. they all worked for me.

Idk what version of FF these guys have on their Mac but something is pushing the rollover affect to the left.

very strange. as a result I’m probably going to have to slice up every menu item to have its own image instead of every item and state being on the same image. bums me out.

[Chris Coyier]

You could maybe use browsershots.org to capture all the versions of FF and see which one is acting up, and then use a conditional stylesheet to target it and fix it. Otherwise, you can still use "sprites" for each individual menu item. That’s what I usually use, not quite as efficient as it could be, but it still saves some load time and works well:

https://css-tricks.com/images/nav-articles.jpg

[Digital Skraps]

Chris – I use browsershots.org religiously but it doesnt let you see hover states which according to my client is the problem. the normal state is fine, but when you hover the item shifts. this is about the same site i emailed you about earlier this week. never got that image thing to display in ie6 so im currently looking up some jQuery stuff to see if i can do something similar there.

Toby – thanks for taking a look. I appreciate it.

and i agree. this forum is a wonderful idea.

Ive been needing a css forum to go to that i can trust for a while. this is the perfect site for that since i read most everything here anyway.

[Towers]

It’s working fine in the newest Firefox beta on Mac, so rest assured it works here.

[Digital Skraps]

Thank you. I’m starting to think it was a phantom hick up or something.

[Towers]

Possibly.

I don’t know that this would actually matter, since I don’t know what exactly would cause it, but have you tried getting them to clear their cache? It might just be remembering things wrong.

[Author]

Posts