IE (7?) Distorts sprite backgrounds?

Question

I pull my hair on it.

We have just finished with the development of a major overhaul of our site. As a last step, we are trying to wrap all glyphs and icons in a sprite. They are all transparent .png, so sprite too. It seems that if the background comes from sptire, IE distorts it. If it comes from the source file, it is not. FF and Chrome are good anyway.

I look at the orignal image and the sprinter version side by side with the grids to see that the pixels are identical. I counted the pixels in the sprite many times to make sure I use the correct coordinates. My CSS look like this:

XXbackground: url(sprite.png) no-repeat 0px -837px; /* lozRedRedSpacer */ background: url(lozRedRedSpacer.png) no-repeat; 

"XX" lets me switch back and forth. In the single-file version, it looks perfect: . The sprite version looks like this: . It seems that it is “contracting” both vertically and horizontally. This does not happen in FF or Chrome.

Any ideas?

EDIT I was able to remove most of the noise and post an example here . I added notes for example to describe my problem.

Thank you so much for taking the time to look at this!

UPDATE We have since replaced these “overlapping separator images” with CSS pseudo-classes that REALLY overlap, and the zoom problem seems to be gone. Of course, now we have new problems - IE8 gets the wrong z-order, and IE7 doesn't understand psuedo elements at all. But at least the markup is simpler and there is no problem with scaling.

Answer 1

Turns out my problem was caused by IE's scaling function. Without any increase, everything looks the same as other browsers. Even 150% or 200% look good. But 125% where I had this causes this distortion. This happens in IE7 and IE8.