Was wondering if anybody knows a fix for this. It appears that these 2 centering methods are treated differently in browsers and when the browser is an odd number of pixels wide, it results in a 1 pixel gap.
In Firefox, the gap appears on the left, but in my IE6 it is on the right. I don't have IE7 or IE8 to test this, so maybe someone could look at it in those browsers and tell me if it happens there too.
The only info I could find was a reference on the Mozilla forums of this being a bug.
Here's a test page: oddpixel
and here's the sample code:
If you resize the browser (slowly) you'll notice a gap appear in the left or the right between the background image and the "bar".
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
margin: 0 auto;
background:url(background.png) repeat-y center;