Odd Display Issue + Centering Page

HTML & CSS
1

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

2

Firstly, remove this:

* {
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;

3

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 [URL=“http://www.maxdesign.com.au/articles/css-reset/”]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.

4

Yes, this worked:


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.

5

You need


h1 {
  margin-top: 0;
}

It’s an issue of collapsing margins.

6

@ralph_m has helped me solve dozens of issues. Thanks one more time!

7

No worries! That’s what we are here for. :slight_smile: