473,226 Members | 1,460 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,226 software developers and data experts.

IE6 centered divs over centered background image alignment problem

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.
Jul 20 '05 #1
4 9697
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 vo. O resto imperfeito.
- Renato Russo -
Now playing: Status Quo - Roadhouse Medley (radio edit)
Jul 20 '05 #2
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
Jul 20 '05 #3
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.
Jul 20 '05 #4
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.
Jul 20 '05 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

5
by: Haines Brown | last post by:
I want a centered body, 680px wide, having a red bottom margin. The following works well in galeon, but not in IE5, where the bottom margin steals the full width of the viewpoint. That is, the red...
13
by: Aaron | last post by:
Hi, In the following code, everything looks fine on Explorer, but on Netscape there is a large white gap between the 'top' section and the 'bottom menu' section. I've set the style 'div img...
2
by: David Winter | last post by:
This is a totally trivial CSS problem, I'm sure, but I don't get it. I want a centered DIV with a fixed width between two other DIVs that should fill the rest of the window/viewport (= 100%). How...
12
by: deko | last post by:
Is there any way to work around the blank space created by hidden divs? I'm trying to use a relatively postioned divs with show/hide behaviors to annotate an image. The divs show/hide...
9
by: Troy Piggins | last post by:
If I use the code: ----- <div style="text-align: center;"> <a href="photos.php?img=xx1.jpg"> <img src="xx1.jpg" style="padding: 10px;" /> </a> <a href="photos.php?img=xx2.jpg">
7
by: TheLongshot | last post by:
I just recently converted a few pages of my application to using master pages. Problem is, in all of my content pages, the contents are centered. I can't figure out why. The markup in the...
19
roula
by: roula | last post by:
I HATE DIVS AND DIFFERENT BROWSERS!!! i spent the whole day and night searching for a way to center align stupid divs, the problem is that the code is so sensitive, i lost my mind trying to make them...
1
by: alice | last post by:
I'm trying to have a background image in a div, then have several divs within that div that have black backgrounds. The problem I'm finding is that in Firefox and Safari, the first background image...
2
by: rigiditymodulus | last post by:
Hi - So, I had this working perfectly, then had a small crash (the transmitter for my wireless mouse occassionally freaks out my MacBook Pro) and when I rebooted and opened up my file the two...
0
by: VivesProcSPL | last post by:
Obviously, one of the original purposes of SQL is to make data query processing easy. The language uses many English-like terms and syntax in an effort to make it easy to learn, particularly for...
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, youll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.