Jump to content

CSS overflow:hidden issue in IE6 and IE7

kwilliams

By kwilliams
in CSS

Recommended Posts

kwilliams Member

kwilliams

Posted
Posted

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.htmWith 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><!-- end screenheader -->	<div id="wrapper">		<div id="content" class="column">			<!-- Dynamic MainColumn -->			<h1>CSS overflow:hidden Issue</h1>			<br />			CONTENT GOES HERE		</div><!-- end content -->		<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><!-- end leftnav_dept_links -->		</div><!-- end screenleftnav -->				<div id="right" class="column">			RIGHT COLUMN GOES HERE		</div><!-- end right -->	</div><!-- end wrapper -->		<div id="footer-wrapper">		<div id="footer">			FOOTER GOES HERE		</div><!-- end footer -->	</div><!-- end footer-wrapper --></body></html>

Link to comment
Share on other sites
jlhaslip Devoted Member

jlhaslip

Posted
Posted
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.
We will be willing to help you, but a link to a live page, complete with content, would be nice.Otherwise, you expect me to guess what the content is which you are having difficulties with?And I need to clutter up my machine to assist you? Help us help you by posting a link, please.
Link to comment
Share on other sites
kwilliams Member

kwilliams

Posted
  • Author
Posted
We will be willing to help you, but a link to a live page, complete with content, would be nice.Otherwise, you expect me to guess what the content is which you are having difficulties with?And I need to clutter up my machine to assist you? Help us help you by posting a link, please.
This site is on a test server, so there is no link to provide...sorry.The code attached can simply be copied and pasted into an ASP.NET doc, and then displayed on several browsers to see what I'm talking about. This shouldn't at all clutter up your machine. Let me know if you have any other questions. Thanks.
Link to comment
Share on other sites
Reg Edit Member

Reg Edit

Posted
Posted
This site is on a test server, so there is no link to provide...sorry.The code attached can simply be copied and pasted into an ASP.NET doc, and then displayed on several browsers to see what I'm talking about. This shouldn't at all clutter up your machine. Let me know if you have any other questions. Thanks.
Looks OK in FF but in IE7 I'm seeing about a mile of white space continuing down below the footer, accompanied by a black stripe down the left. Is that what you're seeing? Seems to be your #wrapper .column style fouling things up for you. I'm guessing those padding-bottom and margin-bottom settings are a kludge to make the nav bar the right height... :) you'll need to think more about that. But if you comment them out as below, the problem I saw stops happening:
		#wrapper .column {			position: relative;			height:100%;			float: left;			/*  			padding-bottom: 1001em;	 			margin-bottom: -1000em;	 						*/		}

Link to comment
Share on other sites
kwilliams Member

kwilliams

Posted
  • Author
Posted
Looks OK in FF but in IE7 I'm seeing about a mile of white space continuing down below the footer, accompanied by a black stripe down the left. Is that what you're seeing?
Yes, that is what I'm having trouble with.
Seems to be your #wrapper .column style fouling things up for you. I'm guessing those padding-bottom and margin-bottom settings are a kludge to make the nav bar the right height... :) you'll need to think more about that. But if you comment them out as below, the problem I saw stops happening:
		#wrapper .column {			position: relative;			height:100%;			float: left;			/*  			padding-bottom: 1001em;	 			margin-bottom: -1000em;	 						*/		}

Yes, according to the referenced article, that is what the purpose for "padding-bottom: 1001em" and "margin-bottom: -1000em". I commented them out to see what would happen, and although it did fix the overflow problem, the left column doesn't go all to way down to the footer as it should. I also tried moving those two values from "#wrapper.column" to "#screenleftnav", but it again causes the same overflow problem. Any other suggestions would be great. Thanks.
Link to comment
Share on other sites
jlhaslip Devoted Member

jlhaslip

Posted
Posted

Are you trying to do a faux-column to make the sidebars heights the same as the longest column?google faux columnOr possibly google ryan Fait sticky footer to have the footer placed at the bottom of the display page?

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...