CSS overflow:hidden issue in IE6 and IE7 [Archive]

kwilliams

10-25-2007, 09:15 AM

I created a CSS stylesheet based on this article: http://www.alistapart.com/articles/dropdowns/
...and I created a 100% div height design from that with this article: http://www.webmasterworld.com/css/3333354.htm

With these referenced sites, I created a site with a header, footer, left column, center column, and a right column. It looks great in all browsers that I've tested so far, which include IE6, IE7, and Firefox. But for some reason, a few of the pages don't obey the "overflow:hidden" in IE6 and IE7. Most of them do, which is what's confusing me about it.

If anyone could let me know what I'm doing wrong, I'd really appreciate it. I've included the code of a page that has this problem below. If you copy & paste the code below, and check it in each of the referenced browsers, you should get the same result. Thanks for any and all help.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>CSS overflow:hidden Issue</title>
<style type="text/css">
/*** The Essential Code ***/
html {
font-size:62.8%;
margin:0;
padding:0;
}

body {
font-family:verdana, arial, helvetica, sans-serif;
font-size:1.2em;
margin:0;
padding:0;
color:#000;
background-color:#FFF;
empty-cells:show;
min-width: 100%; /* 2 x (LC fullwidth + CC padding) + RC fullwidth */
}

#wrapper {
padding-left: 150px; /* LC fullwidth */
padding-right: 238px; /* RC fullwidth + CC padding 218 + */
overflow:hidden;
/*padding-bottom:75px;*/
padding-bottom:575px;
-padding-bottom:0px;
}

#wrapper .column {
position: relative;
height:100%;
float: left;
padding-bottom: 1001em; /* X + padding-bottom */
margin-bottom: -1000em; /* X */
}

#content {
padding: 15px 0px 0px 0px/*left*/; /* CC padding */ /*'padding-top' 'padding-right' 'padding-bottom' 'padding-left'*/
width: 100%;
background: #FFF;
}

#content_printerfriendly {
padding: 10px 0px/*left*/; /* CC padding */
width: 100%;
background: #FFF;
}

#right {
width:218px; /*RC width */
padding-top:10px;
margin-right: -100%;
margin-left:20px;
color:#333;
background-image:url(rightcolumn_lines.gif);
background-repeat:repeat;
}

#footer {
width:100%;
height:60px;
text-align:right;
color:#FFF;
background-color:#000;
clear: both;
}

#footer-wrapper {
float: left;
position: relative;
width: 100%;
margin-bottom: -10px;
background: #000; /*** Same as body background ***/
}

/*** IE Fixes ***/
* html #screenleftnav {
left: 238px; /* RC fullwidth */
}

* html #footer-wrapper {
/*padding-bottom: 10010px;
margin-bottom: -10000px;*/
padding-bottom: 50px;
margin-bottom: -50px;
}

.leftheader {
background-color:#000;
color:#FFF;
font-weight:bold;
text-align:center;
word-wrap:break-word; /* For Mozilla: Use 'zero width space' to break long words */
border-top:0px solid #000; /*'border-bottom-width' 'border-bottom-style' 'border-bottom-color'*/
width:120px;
margin-top:3px;
margin-bottom:-13px;
}

#screenleftnav {
width: 120px; /* LC width */
padding: 0; /* LC padding */
right: 150px; /* LC fullwidth + CC padding */
margin-left: -100%;
margin-top:44px;
color:#FFF;
background-color:#000;
border-right: 3px solid #900; /*'border-right-width' 'border-right-style' 'border-right-color'*/
}

#screenleftnav ul {
padding:0px; /*removes indent Mozilla and NN7*/
list-style-type:none; /*turns off display of bullet*/
text-align:center;
margin:15px 0px 0px 0px; /*'margin-top' 'margin-right' 'margin-bottom' 'margin-left'*/
}

#screenleftnav li {
float:left;
}

#screenleftnav a {
width: 117px;
display:block;
background-color:#99C;
padding:1px 1px 1px 1px; /*'padding-top' 'padding-right' 'padding-bottom' 'padding-left*/
border-bottom:1px solid #000; /*'border-bottom-width' 'border-bottom-style' 'border-bottom-color'*/
}

#screenleftnav a:link, #screenleftnav a:visited {
background-color:#99C;
color:#FFF;
text-decoration:none;
}

#screenleftnav a:hover, #screenleftnav a:active {
background-color:#CCF;
color:#000;
}

#screenheader {
width:100%;
border:0px;/*???*/
height:110px;
width:100%;
margin-top:0px;
background-color:#336; /* navy blue */
}
</style>
</head>
<body>
<div id="screenheader">
HEADER GOES HERE
</div>

<div id="wrapper">
<div id="content" class="column">

<h1>CSS overflow:hidden Issue</h1>
<br />
CONTENT GOES HERE
</div>

<div id="screenleftnav" class="column">
<div id="leftnav_dept_links">
<div class="leftheader">Page Links</div>
<br />
<ul>
<li><a href="page1.aspx">Page 1</a></li>
<li><a href="page2.aspx">Page 2</a></li>
<li><a href="page3.aspx">Page 3</a></li>
</ul>
</div>
</div>

<div id="right" class="column">
RIGHT COLUMN GOES HERE
</div>
</div>

<div id="footer-wrapper">
<div id="footer">
FOOTER GOES HERE
</div>
</div>
</body>
</html>

KDLA

10-25-2007, 09:48 AM

You've got some strange coding there. You're using a lot of negative margins, which IE hates.

Your layout is simple. To create the three columns look, simply tile a background image down the length of the page for the color, then float right and left your sidebars. Take a look at this tutorial: http://css.maxdesign.com.au/selectutorial/tutorial_intro.htm

KDLA

Centauri

10-25-2007, 10:02 AM

I don't think the overflow is the problem, but rather that large bottom padding and negative bottom margin - what the heck is that all about??

For a simple layout, you seem to have made it overly complex with all that negative stuff happening (which IE6 sometimes doesn't like). If it was marked up in normal document flow order, then everything would sit together naturally without any "tricks"..

kwilliams

10-25-2007, 11:14 AM

Thanks for the URL. I will give it a try in the near future to hopefully avoid the tricks. But I noticed that the footer does not appear at the bottom of the page. My layout depends on a set of columns that go all the way to the bottom of the page, when they meet the header. So I'm not sure how I could accomplish that with the referenced URL.

So if you could you give me an example of a stylesheet with a 3-column layout, header, and a footer that appears at the bottom of the page that works exactly the same in all browsers without any tricks? I'd love to see it.

In the meantime, I need to use the stylesheet I have for now, as I'm close to launching my site. So why would my stylesheet work on one page in IE6/7 fine, and not in another page, if their properties are exactly the same? And why would it work in FF and not IE? Thanks for any help.