Funny DIV spacing inconsistency with NN 7

[Pritzl]

I was recently working on a site and decided to go full CSS all the way for positioning. Anyway, it works pretty good overall except for one irksome little detail. My main content div (which uses a non-repeating background image) is sort of "separating" from the divs above and below it in NN 7.1. This really surprised me and I haven't been able to figure out why it's doing this.

Below are the relevant parts of the css markup:

div
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
height: auto;
}
#header
{
height: 91px;
width: 760px;
}
#contentFrame
{
width: 760px;
text-align: left;
background-image: url(images/bg.jpg);
background-repeat: no-repeat;
}
#footer
{
background-color: #AEB17A;
height: 24px;
width: 760px;
}
#footer a, #footer p
{
color: white;
font-weight: bold;
font-size: 9px;
padding: 5px;
}
h1
{
color: #B21B27;
font-size: 16px;
}
h2
{
color: #B21B27;
font-size: 15px;
}
p
{
color: #999;
font-size: 12px;
line-height: 16px;
}

I embeded all 3 main divs (#header, #contentFrame and #footer) inside a div with align="center" set to center them on the page and while the divs center properly, there is a gap above and below the contentFrame. There are a number of other divs with pretty similar setups but they all work fine.

Anyone know where I may have gone wrong?

[isitreal]

try adding this:

html, body {
margin:0;
padding:0;
}

[Pritzl]

Thanks, that seems to have done the trick for the bottom gap. Still have the issue of the gap near the top of the contentFrame. It's not pressing though, since it is not essential from a style point of view.

Appreciate the help... :)

[SuzyUK]

It sounds like it might be collpasing margins [w3.org].

the expression collapsing margins means that adjoining margins (no padding or border areas separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.

so if the <h1> is the first element in the content div its top margin (it's there be default) is touching the <content> top margin and they are combining. Moz renders the margin outside the content box. (the same happens if it were a <p>
anything with a margin)

try setting the margins to 0 on all <hx> and <p> elements, and then set the padding to control the spacing required between the elements..

Suzy