Odd Display Issue + Centering Page

**etidd** · Jul 3, 2012 23:12

Hello all,

I am working on the website at georgiasbest.com, and I am seeing some weird display issues that I otherwise don't see on my local machine. The whole image is practically cut off! What is going on here? Something to do with the web host?

I also need to find out what I did incorrectly to center the page. Apparently margin:0 auto; isn't correct in this case.

-T

**ralph.m** · Jul 3, 2012 23:24

Firstly, remove this:

Code:

* {
margin: 0 auto;
padding: 0;
background: url(gbbg.gif);
}

You don't want every element on the page to be centered (it wouldn't work on every element anyway), and you certainly don't want every element to have the same bg image.

Put a wrapper div around your content and center that instead with margin: 0 auto;

**Black Max** · Jul 3, 2012 23:55

The code Ralph cites looks like some sort of adapted reset. I like resets, but not the "universal selector" "hard" resets, as you're using here. They cause lots of problems. You might find some resets more to your liking here. There are a million different ways to do them, and I find myself veering from one reset to another almost on an arbitrary basis. I've used Russ Weakley's reset as often as anything else. The big thing is to remember that you can and should modify any reset you use to suit your own needs.

**etidd** · Jul 4, 2012 15:37

Yes, this worked:

Code:

body{
 background:url(gbbg.gif);
}
#container{
 margin:0 auto;
 padding:0;
 width:500px;
 height:763px;
 background:url(hpbg.jpg) no-repeat;
}
h1{
 color:#009;
 text-shadow:1px 1px 1px #000, 1px 2px 1px #03F;
 font-weight:bold;
 font-size:40px;
}

However, now the site is bumped down from the top about 20px when I want the image snug at the top.