CSS div gap in firefox - adding a border gets rid of the gap! - CSS forum at WebmasterWorld

Ok, I've got a problem with Firefox showing a gap between divs. The page is as below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Better Hearing Care</title>

</head>
<body>

<div id="head_full">
<div id="header"><img src="images/header_Free_Call_0800_043_4888.gif" name="Tel" width="206" height="129" class="tel" /><img src="images/header_logo_Better_Hearing_Care.gif" width="314" height="129" class="logo" /></div>
<div id="headerlinks"> Home • About Us • Your Hearing Aid • Our Range • Contact Us</div>
</div>
<div id="mainnav_full">
<div id="mainnav">
<p>mainnav </p>
</div>
</div>
<div id="footer_full">
<div id="footer">

</div>
</div>
</body>
</html>

*******************************************

Relevant CSS here:

#head_full {
width: 100%;
background-image: url(../images/header_Background.gif);
background-repeat: repeat-x;
background-color: #00CCFF;
margin: 0px;
padding: 0px;
height: auto;
}

#header {
height: 128px;
width: 711px;
margin-right: auto;
margin-left: auto;
text-align: right;
background-color: #CCCCCC;
margin-top: 25px;
padding: 0px;
margin-bottom: 0px;
}

#headerlinks {
height: 30px;
text-align: center;
width: 711px;
margin-top: 10px;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
padding: 0px;
}

It works fine in IE7, but firefox shows a gap at the top of the page before #header_full. Now when I add a border to the #header_full div, the gap disappears. You can see this in the two divs below as I have added a border to them to illustrate the point. If I remove the border, these two divs also show gaps between them.

I've been tearing my hair out over this all day. Is it something to do with collapsing margins? I've read numerous forum posts with similar problems but i cant narrow it down.

Can anyone help? I've set all the relevant margins and padding to 0, but the gap is still there. If I set padding to 1px, the gap goes away the same as adding a border - but i dont want even a 1px gap! :)

I've tried nearly every setting, and look over my code for obvious errors to no avail.

I'd really appreciate it if anybody could shed some light on this.

Cheers,

Chris.

CSS div gap in firefox - adding a border gets rid of the gap!

firefox css gap problem, adding a border loses the gaps

buckers

buckers

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week