Gap Between Header and Content

Gap Between Header and Content. CSS Layout.

[Ertai]

In the layout I'm creating Firefox is displaying a 10pixel gap between the header and the content (Center div). When I assign float: left; to the Header the gap moves to the top of the Header div.

I've tried everything and have just about given up. I'm going to try and rebuild it tomorrow. Hopefully, with some help :-), it won't come to that.

CSS and XHTML validate.

CSS:

#Header { 
/*float: left;*/ 
margin: 0; 
padding: 0; 
width: 100%; 
height: 102px; 
background: #00377C; 
border-bottom: 3px solid #FFC100; 
} 
#Center { 
  margin: 0 auto; 
width: 720px; 
text-align: left; 
border-left: 1px solid #ccc; 
border-right: 1px solid #ccc; 
} 
#Content_Wrap { 
float: left; 
margin: 0; 
padding: 0; 
width: 539px; 
} 
#Content { 
padding: 24px 20px 0 20px; 
} 
#Footer { 
clear: both; 
color: #FFF; 
background: #00377C; 
} 
/*-- Navigation --*/ 
#Menu { 
/*display: inline;*/ 
float: left; 
width: 174px; 
padding: 0; 
margin: 0; 
} 

HTML:

<div id="Header"> 
</div> 
<div id="Center"> 
<div id="Menu"> 
<h3>home</h3> 
<!-- The menu contains h3 headers and an unordered list --> 
</div> 
<div id="Content_Wrap"> 
<div id="Content"> 
<a name="top"></a> 
<!-- Content Start --> 
<p>Suspendisse orci.   Maecenas pede tellus, congue facilisis, vulputate nec, interdum in, quam. </p> 
<!-- Content End --> 
</div> 
</div> 
<div id="Footer"> 
<p>Testing Footer <a href="#">Hello</a></p> 
</div> 
</div> 

[SuzyUK]

ertai

I think is "collapsing margins" ..

I recently wrote a bit about it over in HTML Forum [webmasterworld.com] that might help, although it was footers it applies to headers too ;)

Suzy

[Ertai]

Thanks again Suzy.

Placing

 * {margin: 0; padding 0} 

fixed the gap.

But now I've run into another problem, that seems like a box model problem. I'm getting a 4px space below an image I have in the Header div. I assumed it was a box model error, because I have the bottom border turned on, but it is only 2px, so having a 4px space wouldn't make sense.

In any case, I tried the box model hack to no avail, and later took out the height attribute, which didn't change anything so I assumed that's why the box model hack didn't work. (on a side note, does the box model hack work on height att?)

This is the ever so problematic html:

<div id="Header"> 
<div id="Logo"> 
<a href="index.shtml" title="" accesskey="1"> 
<img src="images/header.jpg" alt="" /> 
</a> 
</div> 
</div> 

along with the equally problematic css:

#Header { 
margin: 0; 
padding: 0; 
width: 100%; 
/*height: 93px;*/ 
background: #00377C; 
border-bottom: 2px solid #FFC100; 
} 
#Logo { 
margin: 0 auto; 
padding: 0; 
width: 750px; 
text-align: left; 
} 

As always, thank you for your help.

[aeve]

The gap beneath your image is because it is an inline (like text) rather than a block level element and defaults to baseline alignment in compliant browsers. Sometimes it seems like a silly default but fortunately it's easy to fix.

If you don't have anything else in the div that needs to continue the line, you can declare

#logo img {display: block; }

and it should behave. If the image is followed by text, you can try

#logo img {line-height: 1; }

or

#logo img {vertical-align: bottom; }

instead.

Adam