View Full Version : Strange gap between elements

02-25-2011, 01:01 PM
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;

And the CSS for the elements is:

#topbanner {

#menubar {

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 {
font-size: 1px;
line-height: 0px;

But this doesn't do anything.

HTML is currently:

<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!

02-25-2011, 01:28 PM
Don't worry... seems to be fixed now

02-25-2011, 03:32 PM
Hello galahad3,
I'm sure you've discovered this by now but the CSS you've posted here is directed toward id's that are not in your markup. Your markup has classes instead.