...

View Full Version : Strange gap between elements



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

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

Excavator
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum