I'm a beginner CSS coder, so I'm sure I've done something extremely stupid:

I have a wrapper div that is 850px wide. I have set margins to: 0 auto;

It looks fine on a Mac running Firefox or Explorer, but when viewed on IE 5 or 6 on a PC, the background image is off and the site is flush left - not centered.

My header div is 800px wide and centered, and my main content dive is 800px and centered, so the background image of the wrapper will show on sides and top evenly.

Here's the url: http://www.hudsontrailers.com

Here's the css:

body {
background-color:#003300;
font-family:Palantino "Times New Roman", Times, serif;
font-size: 1em;
text-align:left;
}

#wrapper {
background-image:url(../images/bkgnd.jpg);
background-attachment:fixed;
width: 850px;
height;
margin: 25px auto;
padding:25px 0;
}

#header {
background-color:#003300;
border-top:medium solid #FFFFFF;
border-right: medium solid #FFFFFF;
border-left: medium solid #FFFFFF;
width: 800px;
margin: 0 auto;
padding:0;

}
#main {
clear:both;
background-image:url(../images/images/main_bkgnd.jpg);
width:800px;
margin:0 auto;
padding:0;
border-left: medium solid #FFFFFF;
border-right: medium solid #FFFFFF;
border-bottom: medium solid #FFFFFF;
}

Any help would be greatly appreciated.

You need to set body to have 'text-align:center;'. This will centre it in IE, then set your div to 'text-align:left;' to correct the text alignment inside it.

Thanks so much!

Did what you suggested and also added the following to the wrapper div:

position:absolute;
left: 50%;
margin-left: -425px;

Works like a charm now in IE 5 & 6!

Thanks for your help - I really appreciate it.

Originally Posted by ncriptide

Thanks so much!

Did what you suggested and also added the following to the wrapper div:

position:absolute;
left: 50%;
margin-left: -425px;

Works like a charm now in IE 5 & 6!

Thanks for your help - I really appreciate it.

That works well unless the user's screen resolution is smaller than the layout, it will slide off the screen without a scrollbar.

Using position:absolute that way is so UNnecessary and not the optimum way to do things.

On the container type, margin-right : auto and margin-left : auto (should center by itself)

Yes, in most browsers except IE6 and below, for those you need the text-align: center on the body.