IE6 centered divs over centered background image alignment problem

[Mimo Zus]

I'm hoping that someone can explain what's going on; better yet provide
a workaround.

I'm designing a centered CSS site based on a 550 pixel wide vertical
background image. Onto this background I built a two column layout
with nested navigation and content divs. The background image is
centered via "background: ... center;", the divs are centered
over it via "margin: 0 auto 0 auto;".

The problem I'm having in IE6 is inconsistent alignment between
the centered background image and the div centered content above.
Depending on the current browser window size background and div
content are either properly aligned, or misaligned by 1 pixel.
I'm suspecting an even/odd calculation discrepancy between
"background: url("blah.gif") center" and "margin: 0 auto" centering.

Regardless of window size, all div content retain proper relative
alignment. When misaligned, content and background image are off
by 1 pixel across the entire page. I can't really be sure if its the
background or the content that shifts position.

Netscape, Mozilla, and Firefox consistently render proper pixel
perfect alignment between stacked elements irregardless of window
sizing/resizing; IE6 is inconsistent, aligning properly with some
window sizes misaligning by 1 pixel with other sizes.

As I said above, I'm looking for understanding of the problem, and
how to fix it; hopefully without having to tear my design apart.

Below is an example of the basic CSS layout:

------------------------------------------------------------

body {
background: url("bg-vert.gif") #A4AEB8 repeat-y center;
margin: 0;
padding: 0;
}

#container {
margin: 0 auto 0 auto;
padding: 0;
position: relative;
width: 550px;
}

-------------------------------------------------------------

Here's a website that illustrates the problem:

http://www.couloir.org/

Observe the top banner image with different window
sizes.

[Els]

Mimo Zus wrote:

I'm hoping that someone can explain what's going on; better
yet provide a workaround.
[...]
The problem I'm having in IE6 is inconsistent alignment
between the centered background image and the div centered
content above. Depending on the current browser window size
background and div content are either properly aligned, or
misaligned by 1 pixel. I'm suspecting an even/odd
calculation discrepancy between "background:
url("blah.gif") center" and "margin: 0 auto" centering.
[...]
Netscape, Mozilla, and Firefox consistently render proper
pixel perfect alignment between stacked elements
irregardless of window sizing/resizing; IE6 is
inconsistent, aligning properly with some window sizes
misaligning by 1 pixel with other sizes.
[...]
http://www.couloir.org/

Observe the top banner image with different window
sizes.

Yup, I see it.
Haven't explored the varous possible reasons (if any to be
found), but a workaround would be to take
http://www.couloir.org/img/masthead_logo_mtns.gif and cut the
sides off. Use
http://www.couloir.org/img/masthead_logo_mtns.gif for the
entire page's border instead.
--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Status Quo - Roadhouse Medley (radio edit)

[Spartanicus]

Mimo Zus <mi*****@yahoo.com> wrote:

I'm designing a centered CSS site based on a 550 pixel wide vertical
background image.
Pity, you could have built a www site.
Onto this background I built a two column layout
with nested navigation and content divs. The background image is
centered via "background: ... center;", the divs are centered
over it via "margin: 0 auto 0 auto;". body {
background: url("bg-vert.gif") #A4AEB8 repeat-y center;
margin: 0;
padding: 0;
}

#container {
margin: 0 auto 0 auto;
padding: 0;
position: relative;
width: 550px;
}

Specify the background as a background to #container (and do you really
need the "position:relative"?).

--
Spartanicus

[kchayka]

Spartanicus wrote:

(and do you really need the "position:relative"?).

Quite possibly yes, since it is a common way to avoid a whole bunch of
IE6 quirks, like the peek-a-boo bug, though I don't think it should be
used unless one of those nasties actually rears its ugly head.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[Mimo Zus]

Els wrote:

Mimo Zus wrote:

I'm hoping that someone can explain what's going on; better
yet provide a workaround.

Yup, I see it.
Haven't explored the varous possible reasons (if any to be
found), but a workaround would be to take
http://www.couloir.org/img/masthead_logo_mtns.gif and cut the
sides off. Use
http://www.couloir.org/img/masthead_logo_mtns.gif for the
entire page's border instead.

Solved!

Based on your workaround I found that by adding 1 pixel (transparent)
to the right side of the repeated background image
all page elements retain alignment regardless of screen size.
And, the fix doesn't break Mozilla.

I still believe that this is an even/odd roundoff bug (feature?)
with MSIE, and that having an odd length background tile prevents
the image from shifting relative to any above div content.

Thanks for the help.