Thread

Does anyone have a good solution for the IE7 pixel rounding bug? For those of you that don’t know, IE7 has a bad habit of rounding to whole pixels. So, if you’re trying to center a background image in your body and your browser window happens to be an odd-numbered width (say 1001 pixel), IE7 will make 501 the center instead of 500.5. This makes the background look like it’s off by one pixel. Anyone run into this and if so, any suggestions on getting around the problem?

When you say that’s a bug, how would you like the browser to handle it differently? For what it’s worth, how do other browsers handle that one? Logically, you cannot have anything smaller than 1px, so the half of 1001 would be 500.5, correctly rounded to 501. You might make a point for using 500 instead in this case, but what about a window a third or sixth the size of the current screen? 1001 / 3 = 333,66 and 1001 / 6 = 166.83—Would you still want your browser to use 333 and 166 instead?

My suggestion would be to use an even numbered windows width, or create your design in a way where a pixel more or less does not matter.

Here’s a breakdown of how each browser handles the math:

http://ejohn.org/blog/sub-pixel-problems-in-css/

A great read.

And finally, here’s an example of the problem: http://www.pmob.co.uk/temp/onepxjog.htm

A nice write-up, although I was aware of the problem in general. It’s just, well, not exactly a bug in IE, just handling it different.

You could try absolute positioning and if that doesn’t work / isn’t appropriate then use conditional comments to serve an additional stylesheet to IE7 to fix the issue.