Forum Moderators: not2easy
Here is the css that relates
#main {width:800px;
background-color:#FFFFFF;
vertical-align:top;}
#topstrip{
width:800px;
height:10px;
background-color:#5E5E5E;
}
#lefttop{
width:200px;
height:90px;
background-color:#021649;
border: 1px solid #FFFFFF;
border-left:none;
border-top:none;
text-align:center;
float:left;
}
#leftbot{
width:200px;
height:100px;
vertical-align:top;
background-color:#00FF00;
border: 1px solid #FFFFFF;
border-left:none;
border-top:none;
border-right:none;
float:left;
clear:left;
}
.middle{margin-top:5px;}
#midtop{width:599px;
float:right;
clear:right;
border: 1px solid #FFFFFF;
border-right:none;
border-top:none;
border-left:none;
}
and the HTML
<body>
<div align="center">
<div id="main" class="outline">
<div id="topstrip"></div>
<div id="lefttop"><img src="logo.jpg" width="200" class="middle"/>
</div><div id="midtop"><img src="header.jpg" /></div>
<div id="leftbot">
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>item 4</div>
<br class="clr" />
</div>
<br class="clr" />
</div>
</body>
The problem comes becuase there is a gap above my unordered list (which is in the leftbot div) that i can't remove no matter where i put vertical align:top;
Does anyone have any suggestions as to how I could remove this gap in mozilla (it is fine in ie)
Many thanks
Kiwidesign
IE tends to collapse default margins with floats, though it shouldn't (so it's not really fine in IE ;)), UNLESS you specifically declare them so declaring a margin of your own should solve both problems
e.g. #leftbot ul {margin-top: 20px;}
will show you how it should look in both then adjust the 20px to suit yourself
