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.
Code:
<!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' #8203; 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 />
[list]
<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>
KWilliams
CSS overflow:hidden issue in IE6 and IE7
