PDA

Click to See Complete Forum and Search --> : Problems w/ float:left in NS/Win

m9d
03-12-2007, 01:51 PM
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!


<!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; w\idth: 760px;}
.footerSiteLinkBlock {padding: 6px; width: 178px; font-size: 0.75em; float: left;}
* html .footerSiteLinkBlock {width: 190px; w\idth: 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>
m9d
03-12-2007, 03:28 PM
I have reworked the original code and now float LIs in a UL rather than using DIVs. I also have removed the overflow:hidden value from the #container and added float:left values to all the parent elements above the floated LIs.

I have tested this in WinXP/ FF 1.5, NS 8.1, NS 7.1, IE 7, IE 6, IE 5.5 and Opera 9. Here is my code, please let me know if I am missing something.


<!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; float: left;}

#footer {width: 770px; float: left;}

ul#footerSiteLinks {display: block; padding: 0 0 0 10px; width: 760px; border-bottom: 1px solid #CDCDCD; list-style: none; float: left;}
* html ul#footerSiteLinks {width: 770px; w\idth: 760px;}
li.footerSiteLinkBlock {padding: 6px; width: 178px; font-size: 0.75em; float: left;}
* html li.footerSiteLinkBlock {width: 190px; w\idth: 178px;}
li.footerSiteLinkBlock h2 {font-size: 1em;}
</style>

</head>

<body>
<div id="container">

<div id='footer'>
<ul id='footerSiteLinks' style='background:#FFAA00;'>
<li class='footerSiteLinkBlock' style='background:#FF0000;'>
<h2>SIX</h2>
<p>SIX</p>
<p>SIX</p>
<p>SIX</p>
<p>SIX</p>
<p>SIX</p>
</li>
<li class='footerSiteLinkBlock' style='background:#FFFF00;'>
<h2>FOUR</h2>
<p>FOUR</p>
<p>FOUR</p>
<p>FOUR</p>
</li>
<li class='footerSiteLinkBlock' style='background:#FF0000;'>
<h2>TWO</h2>
<p>TWO</p>
<p>TWO</p>
<p>TWO</p>
<p>TWO</p>
<p>TWO</p>
<p>TWO</p>
<p>TWO</p>
<p>TWO</p>
<p>TWO</p>
<p>TWO</p>
<p>TWO</p>
<p>TWO</p>
<p>TWO</p>
<p>TWO</p>
<p>TWO</p>
<p>TWO</p>
<p>TWO</p>
<p>TWO</p>
</li>
<li class='footerSiteLinkBlock' style='background:#00FFFF;'>
<p>ONE</p>
</li>
</ul>
</div>

</div>
</body>
</html>
WebJoel
03-12-2007, 06:13 PM
I looked at both your posts' code and have to admit that I have no idea what you are trying to acheive or what the problem here is. :confused: Can you explain this any better?
m9d
03-12-2007, 07:35 PM
Sorry WebJoel. I probably could do a better job describing what I am trying to do and what is displaying incorrectly.

I am building a footer nav bar that will have four columns of links, text and images across the bottom of the page. Originally I used float:left on four DIVs to create the four column layout. It worked in all browsers I tested except in Netscape. In NS 8.1, the 4th column on the right side of the page displayed under the 1st column all the way on the left side of the page. In NS 7.1, the 4 columns displayed properly, but there was a large margin, within the #footer DIV that stretched the backgorund color too far below all the columns. The margin is also equal in height to the 4th column DIV.

The second example of code I provided, used an UL to layout the 4 columns rather than DIVs. I also used float:left values in all the parent elements above the floated columns. That worked better than the overflow:hidden values that I originally had. This example works in every browser I have looked at and was hoping that if someone noticed any problems, they could let me know.

I am sorry that I can not post a link to view, but the code I provided has been stripped to show just the elements of the footer, that I am having a problem with.