Why is there a margin at the top of my browser?

Question

I have a web page that is displays differently in Firefox and Safari (IE testing yet to come).

The page displays as expected in Safari, but there is a 50px margin between the body and the HTML that I can't determine what is causing it.

Here is the CSS for the body:

body     { 
font-size: 13px; 
line-height: 1.333em; 
background: #f6eaae url(../_images/parchment-big.jpg) no-repeat center top;
font-family: "Lucida Grande", Lucida, Verdana, sans-serif; 
color: #323232;
}

I would really appreciate some assistance in finding what is causing this difference. Ideally the Firefox version is better because it gives that extra breathing room at the top.

Thanks.

Answer 1

Based on your site, I believe the issue is actually with the div id'd as "container". That has it's top margin property set to 50px. Set this to 0px, explicitly, and it should be fine.

Answer 2

I looked up your code and your mistake lies in the #container properties:

#container
{ width: 1100px; margin: 0 auto; margin-bottom: 50px; }

you should say instead

#container
{ width: 1100px; margin-left: 50px; margin-right: 50px margin-bottom: 50px; }

Answer 3

It goes away if you remove the margin set on #container