Space Between divs

Fine in IE problem in firefox

[humpg]

I have a container which contains 3 more containers.
header, body and footer. In firefox I get random spacing in between these 3 divs. Sometimes in between all 3 or just the header and body or body and footer. And sometimes they show up fine with all three tightly stacked on top of each other.

Here is a look at the HTML:

<!-- Main Content Header -->
<div id="main_content_hdr"></div>

<!-- Main Content Container -->
<div id="main_content">
<h4><font color="#697A99">The Company</font></h4>
</div>

<!-- Main Content Footer -->
<div id="main_content_ftr"></div>

And here is the css code for those 3 divs:

#main_content_hdr {
position: relative;
z-index: 2;
width: 532px;
height: 29px;
margin: 0px;
padding: 0px;
background-image: url("../images/ed_layout/main_content_hdr.gif");
}

#main_content {
position: relative;
z-index: 1;
width: 532px;
margin: 0px;
padding: 0px;
background-image: url("../images/ed_layout/main_content_bg.gif");
top: -1px;
}

#main_content_ftr{
position: relative;
z-index: 2;
width: 532px;
height: 26px;
margin-top: -1px;
padding: 0px;
background-image: url ("../images/ed_layout/main_content_ftr.gif");
background-repeat:no-repeat;
_top: -4px;/* positioning for IE */
}

Any Ideas? I am new to css as well so that might just be the problem ;)

[humpg]

Well I added

p {margin: 0;}

This solved my space between my body and footer containers, but it messes with all my content that I have on my site.

Still got the space between the header and body.

[4css]

I'm not sure if this will help you or not, but some browsers add space with headers. What you need to do is zero out the margins and padding for the header.
div#main_content h4
{margin: 0px;
padding: 0px;
}

This might help you out, not sure though.