Centering an absolute positioned div w/ a repeating background.

Encountering problems with Internet Explorer...

[Christopher C]

Hi,

I'm a bit stumped with how to create a centered div that is position: absolute, with a fixed width, and a repeating background. I have no problems with Safari or Mozilla, but IE doesn't like either of my attempts.

What I've read and tried is as follows:

1) Using two divs with a parent/child relationship.

#topParent{
position: absolute;
width; 750px;
margin-left: 50%;
top: 0;
}
#topChild{
margin-left: -384px;
height: 103px;
width: 768px;
background: url(/images/bg.gif);
background-repeat: repeat-y;
text-align: left;
}

2) Using margin auto

#top{
position: absolute;
top: 0;
margin: 0 auto 22px auto;
height: 103px;
width: 768px;
background: url(/images/bg.gif);
background-repeat: repeat-y;
text-align: left;
}

The unfortunate thing is that either of these methods work fine for both Moz and Safari. Neither work for IE. :/

Any suggestions? Am I doing something wrong here?

Thanks,
Chris

[BonRouge]

I think that I'm right in saying that the second option you have there works if you have 'text-align:center' in your body css. IE - crazy piece of kit.
And your first one there would be fine if you just did this :

#top{ 
position: absolute;
left: 50%;
top: 0; 
margin-left: -384px; 
height: 103px; 
width: 768px; 
background: url(/images/bg.gif); 
background-repeat: repeat-y; 
text-align: left; 
} 

I think so anyway...

[Christopher C]

Hi BR,

Ah that's actually very helpful. Setting the left: 50% has things working now for:
Mozilla
Safari
IE 6.x

Just have to figure out IE 5.x and I'll consider it a day.

[SuzyUK]

setting text-align: center on the body would work to center the div in IE5.5 if the div itself were not absolutely positioned, which takes it out of the flow..

have you tried:

#top{
position: absolute;
top: 0;
left: 50%;
margin-left: -384px;
height: 103px;
width: 768px;
background: url(/images/bg.gif);
background-repeat: repeat-y;
text-align: left;
}

using both the left co-ordinate to center it and then the negative left margin ~ half the width value to move it back (outdent) it again.

Suzy

[Christopher C]

Hi Suzy,

I've encountered a new problem in that IE for Mac seems to be caching the external stylesheet? Is this even possible?

What I've found works best so far (IE 6.x, Moz, & Safari) is the following:

#top{
position: absolute;
top: 0;
left: 50%;
width: 768px;
margin-left: -384px;
height: 103px;
background: url(/simages/bg.gif);
background-repeat: repeat-y;
text-align: left;
}

I've taken #top out of the flow because I'd like for my content to appear first on the page. Basically the pseduo for the html page is as follows:

Container (margin top = 100px)
Content (Float right)
Navigation (Float Left)
Footer (Clear Both)
Container Close
Header (Absolute to Top & height 100px)

When I remove the stylesheet the HTML displayed is very pretty.

I've done similar things before for simple sites but I didn't worry about centering the container & set a min-height/height value equal to the height of the nav menu.

[Christopher C]

Well cache problem is solved, I just had to clear it manually. Wierd default preference....