Badly Behaved Table Layout - HTML forum at WebmasterWorld - WebmasterWorld

Forum Moderators: open

Message Too Old, No Replies

Badly Behaved Table Layout

Bad table, bad! No soup for you.

Lance

2:04 pm on Aug 14, 2004 (gmt 0)

10+ Year Member

I posted something similar in the CSS forum a few weeks ago but it was never resolved. Maybe this is the more appropriate forum for the question.

I have a simple 3 row table with the top and bottom row height set statically. I want the middle row to expand to fill the remaining available space. In NN7.1, this layout (below) does exactly that. It works fine. In IE6 though, the top and bottom rows ignore the height setting and expand as much as they can, compressing the middle row to just larger than it's contents. IE in "quirks mode" renders correctly as well, but that is unacceptable for my application.

Does anyone have any ideas?

Thanks.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
 "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Test</title> 
<style type="text/css"> 
html, body 
{ 
 height: 100%; 
 margin: 0px; 
} 
</style> 
</head>  <body> 
 <table border="1" width="100%" style="height:100%"> 
 <tr> 
 <td height="42">Top</td> 
 </tr> 
 <tr> 
 <td>Center</td> 
 </tr> 
 <tr> 
 <td height="42">Bottom</td> 
 </tr> 
 </table> 
</body>  
</html>

ToneLeMoan

2:12 pm on Aug 14, 2004 (gmt 0)

10+ Year Member

Hmm, try this:

<table border="1" width="100%" height="100%">

Lance

2:50 pm on Aug 14, 2004 (gmt 0)

10+ Year Member

Yeah, I've tried:

<table border="1" width="100%" height="100%">

Same problem, and it doesn't validate that way either.

Rhys

12:06 pm on Aug 15, 2004 (gmt 0)

10+ Year Member

Interesting challenge Lance - This works in opera and IE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style type="text/css">
html, body { height: 100%; margin-left: 12px; padding: 0px; spacing: 0px;}
div.outer { height: 90%; background: none #ffffcc;}
div.height { width: 1px; height: 90%; float: left;}
div.filler { clear: both; padding: 0; width: auto; }
div.panel { height: 42px; background: none #cc9966; border: solid #333333 1px; color: #000000; margin: 0.5em 0 0.5em 0; padding: 0; text-align: center; width: auto;}
</style>
</head>
<body>
<div class="outer">
<div class="height"></div>
<div class="panel">Top</div>
Content
<div class="filler"></div>
<div class="panel">Bottom</div>
</div>
</body>
</html>

It involves setting a body height of 100%;
Using a float left 1px (height) div set to 90% to space the page content vertically;
and having an empty (filler) container in the middle to expand and fill the available space.

Lance

5:21 pm on Aug 16, 2004 (gmt 0)

10+ Year Member

Thanks Rhys.

I did end up using a <div> based solution for the time being. I guess it will get me by.

I have since found that I can use a CSS expression to specify the center row height, and that seems to work. Since it is only IE6 in compliant mode that is demonstrating the problem, using the expression should be a good hack.

Rhys

9:56 pm on Aug 16, 2004 (gmt 0)

10+ Year Member

Yep Lance - IEx behaves a lot more predictably if you specify a px height, rather than a percentage.
However, the solution I posted is actually a liquid layout, that keeps its vertical integrity even when squinched up to half screen.
I thought this solution was interesting, because I have seen a lot of threads about the problem of trying to keep footers parked along the bottom when there is variable height middle content.