Log in

View Full Version : IE6 100% height filling past page


Mistrel
12-24-2006, 06:27 PM
I want the last table to expand to the edge of the browser for my footerbut unlike other browsers IE thinks 100% means the height of the entire browser window and not the remainder of the page.

Is there a work-around for this?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">
<!--
html, body {
margin:0;
padding:0;
border:0;
height:100%;
}
-->
</style>
</head>
<body>

<div align="center" style="width:100%; height:100%">
<table style="height:55px" width="788" border="2" cellspacing="0" cellpadding="0">
<tr>
<td width="20">&nbsp;</td>
<td>&nbsp;</td>
<td width="20">&nbsp;</td>
</tr>
</table>

<table style="height:55px" width="788" border="2" cellspacing="0" cellpadding="0">
<tr>
<td width="20">&nbsp;</td>
<td>&nbsp;</td>
<td width="20">&nbsp;</td>
</tr>
</table>

<table style="height:55px" width="788" border="2" cellspacing="0" cellpadding="0">
<tr>
<td width="20">&nbsp;</td>
<td>&nbsp;</td>
<td width="20">&nbsp;</td>
</tr>
</table>

<table style="height:100%" width="788" border="2" cellspacing="0" cellpadding="0">
<tr>
<td width="20">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td width="20">&nbsp;</td>
</tr>
</table>

</div>

</body>
</html>
mwinter
12-24-2006, 07:59 PM
I want the last table to expand to the edge of the browser for my footer

Not going to happen.



but unlike other browsers IE thinks 100% means the height of the entire browser window and not the remainder of the page.

What other browsers are these? Certainly not correct ones, like Firefox and Opera. MSIE is correct, though other aspects of the height property are implemented incorrectly.

The computed height of a percentage height is that proportion of the computed height of the containing block - if, and only if, the height of the containing block does not depend upon the content height. In this instance, the containing block is the div element parent that, as an ancestor of the body and html elements, has the height of the viewport. Therefore, the table will have that same computed height.



Is there a work-around for this?

A workaround for correct behaviour?



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

Serving XHTML as HTML is pointless. Serving Transitional XHTML is surely a joke.



<style type="text/css">
<!--

You definitely don't want to be doing that with XHTML.



<table style="height:55px" width="788" border="2" cellspacing="0" cellpadding="0">

A table-based layout?!

Mike
Mistrel
12-24-2006, 08:10 PM
I would appreciate more constructive criticism. Instead of bombarding me with what I'm doing wrong why don't you educate me on how to create this layout properly?
mwinter
12-24-2006, 08:52 PM
Instead of bombarding me with what I'm doing wrong why don't you educate me on how to create this layout properly?

Assuming you expect the lower element to scroll (given sufficient content), it's possible with fixed positioning, but it wastes an awful lot of space. On that basis, the answer is: You don't.

Mike
Mistrel
12-25-2006, 12:00 AM
Sure you can! What about 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=iso-8859-1" />
<title>Website Title</title>

<style type="text/css">
html, body {
font-family: Tahoma, Arial, sans-serif;
font-size: 11px;
margin:0;
padding:0;
border:0;
height:100%;
}
</style>

</head>
<body>

<div align="center" style="height:100%">
<table width="788" border="2" cellspacing="0" cellpadding="0" style="height:100%">
<tr>
<td width="20" rowspan="2">lshadow</td>
<td valign="top" style="background:#999">
<div style="height:55px; background:#000; color:#fff">logo</div>
<div style="height:28px; background:#333; color:#fff">nav</div>
<div style="height:161px; background:#666">header</div>
<div style="height:auto; background:#999">content</div> </td>
<td width="20" rowspan="2">rshadow</td>
</tr>
<tr>
<td valign="bottom" height="40"><div style="height:40px; background:#CCC">footer</div></td>
</tr>
</table>
</div>

</body>
</html>
mwinter
12-25-2006, 11:43 AM
Sure you can!

What exactly are you trying to contradict? I haven't stated that you can't do anything. I have recommended that you don't do something.



What about this?

Invalid and abuses table elements. Two things I would never recommend.

Mike