homepage Welcome to WebmasterWorld Guest from 54.227.12.4
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Badly Behaved Table Layout
Bad table, bad! No soup for you.
Lance




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

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




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

Hmm, try this:

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

Lance




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

Yeah, I've tried:
<table border="1" width="100%" height="100%">

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

Rhys




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

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




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

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




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

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved