Page and background not centering

ncriptide's picture

He has: 17 posts

Joined: Aug 2007

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.

Roo's picture

She has: 840 posts

Joined: Apr 1999

Add this:
background-position: center;

calculator's picture

They have: 40 posts

Joined: Nov 2007

To center a site in ie5 and ie6 you need: text-align:center on the body and then text-align: left on the wrapper. In addition to what Roo said your code then becomes (i also used CSS shorthand):

body {
background:#030;
font:1em Palantino "Times New Roman", Times, serif;
text-align:center;
}

#wrapper {
background:#B86401 url(../images/bkgnd.jpg) 50% 0 no-repeat;
width: 850px;
margin: 25px auto;
padding:25px 0;
text-align:left
}
'
background:#B86401 url("/images/bkgnd.jpg") 50% 0 no-repeat; explained in details.
#B86401: is an orangy colour like you background. This makes it more seemless when the background appears. You may need to add a green colour to #main and #header it the orange goes behind those as well.
url("/images/bkgnd.jpg") I would always use / to start paths (even links) that way you don't have to cont how many folders deep you are.
50% 0 is the position of your background can also be written as centred top
no-repeat or repeat-y if your page is likely to be longer than the background

You may also want to turn any of your background images into jpg instead of gifs. You should shave around 100K in file size on the orange thing.

ncriptide's picture

He has: 17 posts

Joined: Aug 2007

Thanks Roo and Calculator!

Your suggestions worked!!!! And thanks for the explanation as to the "why" - as I'm really trying to understand this the best I can. Your taking the time to offer your advice has really helped.

Thanks!!!!

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.