Page and background not centering

[ncriptide]

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: Equipment trailers, flat bed trailers, deckover trailers, skid steer trailers, utility trailers, tilt trailers, auto hauler trailer, Hudson Bros Trailer Mfg

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.

[drummin]

Hi,

As you're going with fixed width, I'd "position" your outside container.
Something like this...

#wrapper {
background-image:url(../images/bkgnd.jpg);
background-attachment:fixed;
width: 850px;
position:absolute;
left: 50%;
margin-left: -425px;
padding-top: 25px;
}

[ncriptide]

That did it!!!!

Thank you so much, . . . . . now, being a newbie to CSS, can you explain (as if you are explaining it to a rock) exactly "why" that worked?

I would have thought giving the wrapper a margin of

#wrapper {margin: 0 auto;} would have centered it. That's what I couldn't wrap my mind around.
Can you explain why simply adding:

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

did it for me? I really want to understand this. And what is the deal with margin-left: -425pz?

any insight would be appreciated.

Thanks again for solving my problem!!!!!!