Strange issue with gap between elements

HTML & CSS
1

Hi, I have an issue with two elements in a container that have a gap between them but I cannot see where the gap is coming from.

Basically, I have a standard centered page layout, the relevant CSS for holding the elements (a banner and then a nav menu underneath) is:


body {
	margin: 0px;
	padding: 0px;
	text-align: center;
}

#container {
	width: 1024px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	background-color:#FFFFFF;
}

And the CSS for the elements is:


#topbanner {
	width:974px;
}

#menubar {
	width:974px;
	float:left;
}

The banner goes across the top of the page and the idea is that the menubar (which contains a number of images and their rollovers) fits directly underneath without any gap. But there seems to be white space of about 5px in all browsers and I can’t see why. I tried adding a clearfloat into the HTML, i.e:


.clearfloat { 
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

But this doesn’t do anything.

HTML is currently:


<body>
<div id="container">
<div class="topbanner"><img src="image/banner2.png" alt="banner" /></div>
<div class="clearfloat"></div>
<div class="menubar">(various button images)</div>
<div class="clearfloat"></div>

Any ideas as this has me stumped!

2

First thing i noticed is that your css selectors #topbanner and #menubar refer to element ids that don’t exist in the markup.

<div class=“topbanner”><img src=“image/banner2.png” alt=“banner” /></div>
<div class=“menubar”>(various button images)</div>

you could either change the css to:

.topbanner {
	width:974px;
}

.menubar {
	width:974px;
	float:left;
}

or the markup to:

<div id="topbanner"><img src="image/banner2.png" alt="banner" /></div>
<div id="menubar">(various button images)</div>

Maybe this is the issue?

3

try *{margin:0;padding:0;} and/or img {vertical-align:bottom;}. Other than that your prob going to have to supply a link and then someone can tell you in two secs.

4

Thanks Eric, vertical-align:bottom worked straight off.

Bit of a strange one, it doesn’t sound like an obvious style to try but it worked!

Thanks again

5

O good your welcome. For your knowledge, her are all the ways to fix that issue. http://www.visibilityinherit.com/code/gap-under-image-example.php