| Columns equal height using -ve margins not working correctly in IE6
column border runs to bottom of page straight through the footer |
nigelt74
msg:4133066 | 3:50 am on May 15, 2010 (gmt 0) |
Ok here is the problem
I have a 2 column layout
Header is at top
Main div encompasses content and sidebar
Content is to the left
Sidebar is to the right
Footer is at the bottom
I need the content and sidebar to be the same height, to achieve this i used the negative margin, positive padding hack, and it works fine in all browsers except IE6
The Main Div has a bottom border that is 5 PXs thick
The Sidebar has a left border that is 5 pixels wide
In all browsers except IE6 the sidebar border runs down the side of the page until it meets the Bottom Border of the main div which is above the footer, however in IE6 the sidebar border runs to the bottom of the page straight through the footer and the bottom border of the main div doesn't appear at all
p {
display: block;
margin-top: 1em;
margin-bottom: 1em;
}
#container
{
margin:0 auto;
min-width: 750px;
/*_width: expression(document.body.clientWidth < 752? "750px" : "auto"); hack for old IE -- need to test */
color: #000;
width: 70%;
position: relative;
}
#main {
overflow:hidden; /**/
border-bottom:5px solid #000000;
padding-bottom:15px;
position: relative;
}
/* Main Body starts */
#content {
color: #000;
width: 66%;
float: left;
font-family:Arial,Tahoma,Helvetica,sans-serif;
margin-bottom: -2000px;
padding-bottom: 2000px;
/* overflow:hidden;*/
}
#sidebar {
margin: 0;
padding: 0 0 2000 0;
width: 30%;
float:right;
margin-right: 0;
font-family:Verdana,Geneva,sans-serif;
font-size: 14px;
color:000;
margin-bottom: -2000px;
padding-bottom: 2000px;
border-left:5px solid #bbb;
}
/* Footer Section */
#footer {
clear: both;
text-align: center;
font-family:Verdana,Geneva,sans-serif;
font-size: 10px;
}
HTML
<!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=UTF-8" />
<title>test site</title>
<link href="ihatecss9.9.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="container">
<div id="header">
</div><!-- end header -->
<div id="breadcrumbs">
You are here: Home
</div>
<div id="main">
<div id="content">
Put some content here
</div>
<!-- end content -->
<div id="sidebar">
<div class="bar">
</div>
<div class="cont"><br><br><br>
</div>
</div><!-- end sidebar -->
</div><!-- end Main -->
<div id="footer">
<p>hello this is the footer
</p>
<p>
</p>
</div><!-- end footer -->
</div><!-- end container -->
</div> <!-- END WRAPPER -->
</body>
</html>
I do have a demo page, but as we are not allowed to post links, I obviously can't show you, sohopefully the code above will help
|
birdbrain
msg:4133145 | 11:20 am on May 15, 2010 (gmt 0) |
Hi there nigelt74,
try it like this...
<!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=UTF-8" />
<title>test site</title>
<link href="ihatecss9.9.css" rel="stylesheet" type="text/css" />
[blue]
<!--[if IE 6]>
<style type="text/css">
#main {
zoom:1;
}
</style>
<![endif]-->
[/blue]
</head>
<body>
...
...
...
</body>
</html>
|
|
birdbrain
|
nigelt74
msg:4133319 | 10:31 pm on May 15, 2010 (gmt 0) |
Cheers Birdbrain (that sounds more like an insult that a sincere thank you doesn't it :))
That set me on the right track
That code didn't work as expected, when i applied it to #main the contents of main vanished as well as the borders, same happened when i applied it to #content and #sidebar
But i found If I set this rule
<!--[if IE 6]>
<style type="text/css">
div {
zoom:1;
}
</style>
<![endif]-->
The problem vanished, not sure if it will cause issues further down the track but it seems to be working fine now, so thank you very much, i have been puzzling over this for weeks, didn't even know about the zoom fix thingie.
|
|
|
