Forum Moderators: not2easy
I always knew about the existence of this odd IE behavior - if, let's say, we've got a style like this:
body { background: url(image.jpg) 50% 0 repeat-y; }
#content { margin: 0 auto; width: 1000px; background: #fff; }
the background image (if it's a 1000px wide image) will be placed under the #content, but with a 1 pixel offset sometimes. that is especially visible when resizing the browser window horizontally - the background will move to the proper place and back to a one pixel offset while resizing.
has anyone probably solved it? I know numerous ways of how to avoid it, but in this case the design layout just doesn't leave me other ways of doing it but centering the background image.
so if you've got a hack of some kind on how to fix that 1px moving centered background offset in IE - please share it ;)
cheers,
Martin
no especial tricks, and it's not exclusive to IE either. It is a rounding error caused by using two different methods to center. IE, Opera and FF all do it differently and show the 1px offset at different times :o
say the screen is 1001px wide
when centering a 1000px wide image using 50%.. the browser must first find the center of the image and then choose whether to center it on the 500th or 501st pixel. 2 choices
when centering a 1000px wide div using margin 0 auto the browser will choose one of the sides to add the 1px to, the auto cannot split it to 0.5px each. 2 choices
out of the 4 choices I believe that the 3 windows browsers all use a different combo depending on if it's an even or odd width image!
anyways the only trick I know to get it spot on in all browsers is to nest an extra wrapper the same width as content (or width of image if there's an overlap effect) and center it using the margin: 0 auto method too, put the repeating image as background to bgwrap.
<body>
<div id="bgwrap">
<div id="contentwrap">
if you need for the bgwrap to be at least 100% high (like the body element would do naturally) that can be achieved via CSS and and IE workaround..
or are you saying you cannot add a wrapper div and that you must use the body?
there is another way centering the body element itself, but that has no support in IE5.x, is that an issue?
[edited by: SuzyUK at 5:44 pm (utc) on April 11, 2008]
