This task is giving me a headache.
We're almost finished with revamping our website. The last step involves consolidating all the glyphs and icons into a sprite. These images are transparent .png files, so we made sure the sprite maintains transparency as well. However, it seems that IE distorts the background when it comes from a sprite. On the other hand, FF and Chrome display it correctly whether it's from the sprite or the original file.
I've compared the original image with the sprited version, using grids to ensure the pixels match exactly. I double-checked the pixel coordinates in the sprite multiple times. Here's a snippet of my CSS:
XXbackground: url(sprite.png) no-repeat 0px -837px; /* lozRedRedSpacer */
background: url(lozRedRedSpacer.png) no-repeat;
The 'XX' helps me toggle between the two versions. The individual image looks perfect, but the sprite version appears squished both vertically and horizontally in IE, while it's fine in FF and Chrome.
Any suggestions?
EDIT I was able to clean up the example and provide a link here. I included notes to explain my issue.
Thank you for your help!
UPDATE We decided to replace these overlapped divider images with CSS pseudo-classes that truly overlap, resolving the zooming problem. However, now we face new challenges - incorrect z-order in IE8 and complete lack of support for pseudo-elements in IE7. Nonetheless, the markup is simpler and the zooming issue has been resolved.