PDA

View Full Version : Float / Margin problem in IE6



many_tentacles
Jan 19th, 2009, 10:56 AM
Hi

I have this code which creates a 3 column layout using divs rather than a table.

Problem is it doesn't work in IE6. Every other browser is fine and unfortunately I need it to work in IE6 too.

Here's the source code...



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
* {font-family:Verdana, Arial, Helvetica, sans-serif; margin:0px; padding:0px;}
img {border:none;}
td {vertical-align:top;}

div.maincontainer {width:990px; margin:auto; margin-top:0px; background-color:#00FF00; padding-bottom:25px; overflow:hidden;}
div.maincontainer div.d1 {padding:10px;}
div.maincontainer div.d1 div.d2 {float:left;}
div.maincontainer div.d1 div.d2 div.menupanel {width:180px; float:left;}
div.maincontainer div.d1 div.d2 div.menupanel div.d3 {background-color:#FFFFFF; border:1px solid #000000; padding:10px 10px 25px 10px;}
div.maincontainer div.d1 div.d2 div.menupanel div.d3 h2 {font-size:13px; margin-bottom:10px; margin-top:5px; font-weight:normal;}
div.maincontainer div.d1 div.d2 div.menupanel div.d3 h2 img {padding-bottom:3px;}
div.maincontainer div.d1 div.d2 div.menupanel div.d3 p {font-size:10px; margin-top:6px; margin-left:11px;}
div.maincontainer div.d1 div.d2 div.menupanel div.d3 p a {color:#B22222; font-weight:bold;}

div.maincontainer div.d1 div.d2 div.middlepanel {width:550px; margin-left:190px;}
div.maincontainer div.d1 div.d2 div.middlepanel div.c1 {overflow:hidden; border:1px solid #000000; background-color:#FFFFFF;}
div.maincontainer div.d1 div.d2 div.middlepanel div.c1 h5 {font-size:12px; background-color:#999999;}
div.maincontainer div.d1 div.d2 div.middlepanel div.c1 h5 a {font-weight:bold; color:#B22222; text-decoration:none; display:block; padding:6px 0px 83px 5px;}
div.maincontainer div.d1 div.d2 div.middlepanel div.c1 h5 a span {background-color:#FFFFFF; padding:2px 10px 2px 10px;}

div.maincontainer div.d1 div.rightpanel {width:220px; margin-left:750px;}
div.maincontainer div.d1 div.rightpanel div.b1 {background-color:#FFFFFF; border:1px solid #000000; border-bottom:none;}
div.maincontainer div.d1 div.rightpanel div.b1 h2 {padding:1px 10px 2px 10px; font-size:12px; font-weight:bold; border-bottom:1px solid #000000;}


</style>

</head>

<body>

<div class="maincontainer">
<div class="d1">

<div class="d2">
<div class="menupanel">
<div class="d3">
<h2><img src="images/expanded-arrow.gif" alt="arrow-down" /> Section 1</h2>
<p><a href="#">Link 1</a></p>
<p><a href="#">Link 2</a></p>
<p><a href="#">Link 3</a></p>
<p><a href="#">Link 4</a></p>
</div>
</div>

<div class="middlepanel">

<div class="c1">

<h5>
<a href="#"><span>Link 1</span></a>
</h5>

</div>
</div>
</div>

<div class="rightpanel">

<div class="b1">
<h2>Right panel</h2>
</div>
</div>
</div>
</div>

</body>
</html>


I know the CSS needs a little more tidying up but as far as I can see there's no reason IE6 should mess around with the positioning of the 3 columns. I can only assume it is something related to how IE6 renders float / margin combinations.

anyone got any ideas??

thanks

effpeetee
Jan 19th, 2009, 11:40 AM
Just tidied up a bit.

Frank


<!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>
<meta http-equiv="Content-Type" content=
"text/html; charset=us-ascii" />
<title>Untitled Document</title>

<style type="text/css">

* {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
}

img {
border: none;
}

td {
vertical-align: top;
}

div.maincontainer {
width: 990px;
margin: auto;
margin-top: 0px;
background-color: #00FF00;
padding-bottom: 25px;
overflow: hidden;
}

div.maincontainer div.d1 {
padding: 10px;
}

div.maincontainer div.d1 div.d2 {
float: left;
}

div.maincontainer div.d1 div.d2 div.menupanel {
width: 180px;
float: left;
}

div.maincontainer div.d1 div.d2 div.menupanel div.d3 {
background-color: #FFFFFF;
border: 1px solid #000000;
padding: 10px 10px 25px 10px;
}

div.maincontainer div.d1 div.d2 div.menupanel div.d3 h2 {
font-size: 13px;
margin-bottom: 10px;
margin-top: 5px;
font-weight: normal;
}

div.maincontainer div.d1 div.d2 div.menupanel div.d3 h2 img {
padding-bottom: 3px;
}

div.maincontainer div.d1 div.d2 div.menupanel div.d3 p {
font-size: 10px;
margin-top: 6px;
margin-left: 11px;
}

div.maincontainer div.d1 div.d2 div.menupanel div.d3 p a {
color: #B22222;
font-weight: bold;
}

div.maincontainer div.d1 div.d2 div.middlepanel {
width: 550px;
margin-left: 190px;
}

div.maincontainer div.d1 div.d2 div.middlepanel div.c1 {
overflow: hidden;
border: 1px solid #000000;
background-color: #FFFFFF;
}

div.maincontainer div.d1 div.d2 div.middlepanel div.c1 h5 {
font-size: 12px;
background-color: #999999;
}

div.maincontainer div.d1 div.d2 div.middlepanel div.c1 h5 a {
font-weight: bold;
color: #B22222;
text-decoration: none;
display: block;
padding: 6px 0px 83px 5px;
}

div.maincontainer div.d1 div.d2 div.middlepanel div.c1 h5 a span {
background-color: #FFFFFF;
padding: 2px 10px 2px 10px;
}

div.maincontainer div.d1 div.rightpanel {
width: 220px;
margin-left: 750px;
}

div.maincontainer div.d1 div.rightpanel div.b1 {
background-color: #FFFFFF;
border: 1px solid #000000;
border-bottom: none;
}

div.maincontainer div.d1 div.rightpanel div.b1 h2 {
padding: 1px 10px 2px 10px;
font-size: 12px;
font-weight: bold;
border-bottom: 1px solid #000000;
}

</style>
</head>
<body>
<div class="maincontainer">
<div class="d1">
<div class="d2">
<div class="menupanel">
<div class="d3">
<h2><img src="images/expanded-arrow.gif" alt="arrow-down" />
Section 1</h2>
<p><a href="#">Link 1</a></p>
<p><a href="#">Link 2</a></p>
<p><a href="#">Link 3</a></p>
<p><a href="#">Link 4</a></p>
</div>
</div>
<div class="middlepanel">
<div class="c1">
<h5><a href="#"><span>Link 1</span></a></h5>
</div>
</div>
</div>
<div class="rightpanel">
<div class="b1">
<h2>Right panel</h2>
</div>
</div>
</div>
</div>
</body>
</html>

many_tentacles
Jan 21st, 2009, 02:35 PM
Thanks for that.

Much clearer, i agree.

Does anyone have any ideas on the reason for the layout problems though?

abduraooft
Jan 21st, 2009, 02:41 PM
Um.. you are making your CSS selectors too specific.
I'd recommend to check http://www.bonrouge.com/3c-hf-fixed.php, which is a good 3 column fixed layout.