I am trying to float 4 DIVs across my footer, and the 4th floated DIV is falling under the 1st floated DIV in NS 8.1 (Display like IE) and is floating properly in NS 7.1, but there a margin at the bottom, that is equal to the height of the 4th DIV.
Everything displays properly in Win/Pro: FF 1.5, IE 7, IE 6, IE 5.5 and Opera 9.
I have stripped away all the excess code to make it easier to see the problem. Please take a look at my CSS + XHTML below. I appreciate any and all suggestions!
[code]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>TEST</title>
<meta http-equiv=”Content-Type” content=”text/html;charset=utf-8″ />
<style type=”text/css”>
* {margin: 0; padding: 0;}
body {font-family: Verdana, Arial, sans-serif;
font-size: 0.8em;
font-style: normal;
font-weight: normal;
line-height: 150%;}
#container {width: 770px; overflow: hidden;}
#footer {width: 770px;}
#footerSiteLinks {padding: 0 0 0 10px; width: 760px; min-height: 1px; height: auto; border-bottom: 1px solid #CDCDCD; overflow: auto;}
* html #footerSiteLinks {width: 770px; width: 760px;}
.footerSiteLinkBlock {padding: 6px; width: 178px; font-size: 0.75em; float: left;}
* html .footerSiteLinkBlock {width: 190px; width: 178px;}
.footerSiteLinkBlock h2 {font-size: 1em;}
/**/
* html #footerSiteLinks {height: 1px; overflow: visible;}
/**/
</style>
</head>
<body>
<div id=”container”>
<div id=’footer’>
<div id=’footerSiteLinks’ style=’background:#FFAA00;’>
<div class=’footerSiteLinkBlock’ style=’background:#FF0000;’>
<h2>SIX</h2>
<p>SIX</p>
<p>SIX</p>
<p>SIX</p>
<p>SIX</p>
<p>SIX</p>
</div>
<div class=’footerSiteLinkBlock’ style=’background:#FFFF00;’>
<h2>FOUR</h2>
<p>FOUR</p>
<p>FOUR</p>
<p>FOUR</p>
</div>
<div class=’footerSiteLinkBlock’ style=’background:#FF0000;’>
<h2>EIGHT</h2>
<p>EIGHT</p>
<p>EIGHT</p>
<p>EIGHT</p>
<p>EIGHT</p>
<p>EIGHT</p>
<p>EIGHT</p>
<p>EIGHT</p>
</div>
<div class=’footerSiteLinkBlock’ style=’background:#00FFFF;’>
<p>ONE</p>
</div>
</div>
</div>
</div>
</body>
</html>