Overflow Disabled in Opera/Firefox Standards Mode

**Jesdisciple** · 12-03-2009, 01:26 PM

For some reason Quirks Mode does as I expect while Standards Mode does some strange stuff. I did make the mistake of not validating the page as I built it, but the HTML and CSS validators find no problems. I did try using a transitional doctype, but it didn't solve the problem. And that is that my CSS overflow statement is disregarded with either DTD.

If anyone knows a CSS solution for keeping he heights of columns equal, please do tell. I saw the DD script in the CSS library, but I would rather keep JS out of this site if possible. Thanks!

Code:

body{
	background-color: black;
	margin: 0px;
	padding: 0px;
	color: red;
	height: 100%;
}

div#body{
	margin: auto;
	padding: 0px;
	width: 800px;
	height: 100%;
}

div#body > div#left{
	background-color: green;
	float: left;
	width: 20%;
	margin: 0px;
	padding: 0px;
}

div#body > div#left > ul#menu{
	width: 100%;
	list-style: none none;
	color: red;
	z-index: 0;
	margin: 0px 0px 0px 1px;
	padding: 0px;
}

div#body > div#left > ul#menu>li{
	width: 100%;
	margin: 0px;
	padding: 0px;
	border-bottom: 1px solid red;
}

div#body > div#left > ul#menu>li a{
	color: red;
	text-decoration: non;
	width: 100%;
	display: block;
}

div#body > div#left > ul#menu>li:hover{
	background-color: red;
}

div#body > div#left > ul#menu>li:hover a{
	color: green;
}

div#body > div#center{
	height: 100%;
	width: 65%;
	background-color: #00FFFF;
	float: left;
	overflow: auto;
}

div#body > div#right{
	float: right;
	width: 15%;
	text-align: right;
	background-color: green;
}

div#footer{
	clear: left;
	background-color: #FF00FF;
	height: 1.25em;
	text-align: center;
}

div#header{
	clear: left;
	background-color: #FF00FF;
	color: black;
	text-align: center;
	margin: 0px;
	padding: 0px;

}

div#header > a > img{
	border: 0px solid blue;
}
table#catalogue{
	margin: auto;
}
table#catalogue td:first-child{
	text-align: center;
}

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
		<link rel="stylesheet" type="text/css" href="general.css">
	</head>
	<body>
		<div id="body">
			<div id="header">
				<!-- banner -->
			</div>
			<div id="left">
				<!-- nav list -->
			</div>
			<div id="center">
				<!-- long table -->
			</div>
			<div id="right">
				<!-- sidebar -->
			</div>
			<div id="footer">
				<!-- footer -->
			</div>
		</div>
	</body>
</html>

**jscheuer1** · 12-03-2009, 03:11 PM

There is no height: 100%; in a valid URL DTD without a container with a height defined in some finite units like pixels or ems. In quirks mode, the body is assumed to be the height of the window (innerHeight or document.body.clientHeight, depending upon the browser) or the height of the content (document.body.offsetHeight), whichever is greater, or something like that (it is quirks after all so can vary, but at least it has some meaning) so your:

Code:

div#body{
	margin: auto;
	padding: 0px;
	width: 800px;
	height: 100%;
}

would 'work', as well as your:

Code:

div#body > div#center{
	height: 100%;
	width: 65%;
	background-color: #00FFFF;
	float: left;
	overflow: auto;
}

But in a valid URL DTD neither of these heights has any meaning. So the elements with them will expand to be as high and no higher than they need to be to fit the content inside them as wrapped (if need be) by their respective widths.

I'm not sure if this has ever been solved without javascript, and is one of the things that often puts people off of using a valid URL DTD if they discover it soon after learning about validation. But you can define the heights in finite units or make a container that has a height defined in finite units. This is less flexible, but it works.

**Jesdisciple** · 12-03-2009, 07:09 PM

I was hoping to find a solution in these threads, but didn't see anything that helped one bit:
http://www.webmasterworld.com/forum83/1236.htm
http://www.webmasterworld.com/forum83/1123.htm

Even in quirks the height doesn't really work; if one column extends beyond its normal size, the others remain the size of the screen. Combined with overflow:auto this would be an acceptable workaround, but I do want to keep the DTD.

Unless you can understand the Webmaster World threads, I guess I'll use a fixed default height as you described.

Thanks again.

Thread: Overflow Disabled in Opera/Firefox Standards Mode

Thread Tools

Search Thread

Overflow Disabled in Opera/Firefox Standards Mode

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions