homepage Welcome to WebmasterWorld Guest from 54.161.214.221
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved