asked on

Why is my 3 row table stretching 100% high, but the middle row stretches oddly in Internet Explorer?

Hello Gurus,
I'm troubleshooting a table that stretches 100% high,where the top and bottom row have pixel heights, and the middle row is supposed to stretch and fill the gap. This is working great everywhere but Internet Explorer, collapsing the middle row and making the top and bottom rows stretch.

In the example provided, the table fills the whole page. The actual template I'm working on mainly uses this type of table to fill different columns of the page layout to make variable height content in cell A line up with variable height content in cell B. The main template shell also follows this format, which could be changed, but that doesn't resolve what's going on with the content within the page.

I could "resolve" this issue by forcing IE into quirks mode like this:

<![if !IE]>
<!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">
<![endif]>

However, that seems unprofessional and causes some other undesirable side effects. Any thoughts on how to make this work? If I have to, I'll rebuild every page but my boss wouldn't be too happy with that. :P I can also change the doctype if needed "<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> " is not valid, so I guess I couldn't use that. I also want to leave the stone ages if I can with doctype.

I've seen some partial solutions in other areas, but have not hit the target yet.

Thanks for the assist! Let me know if I can provide further info.

<!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=UTF-8" />
<title>CSS height: 100%; Test</title>
<style type="text/css">
body, html {
	height: 100%;
	margin: 0px;
	background-color: #000000;
}
 
table {
	padding: 0px;
	border-spacing: 0px; 
	border-width: 0px;
	width: 100%;
	border-collapse: collapse;
	margin: 0px;
}
 
td {
	padding: 0px;
	border-spacing: 0px; 
	border-width: 0px;
	vertical-align: top;
	text-align: left;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 10pt;
	margin: 0px;
}
</style>
</head>
<body>
    
      <table style="height: 100%; width: 100%;">
        <tr>
          <td style="height: 80px; background-color: #FF9900;">
    	      height: 80px;
          </td>
        </tr>
        <tr>
          <td style="background-color: #CC0000;">
          	height: (not specified - looks great in FireFox, causes odd stretching in IE, unless doctype is removed)
            
          </td>
        </tr>
        <tr>
          <td style="height: 30px; background-color: #FF9900;">
    	    height: 30px;
          </td>
        </tr>
      </table>
 
</body>
</html>

Open in new window

CMYScott

have you tried setting the height = "*".. something like..

torimar

Works fine in Opera too.
I just tested it with:

and it worked in IE.

Can't tell you why though....

Ultrus

ASKER

torimar,
Thanks for your fast response. I've tried both of your suggestions with no success. height="*" gives no different effect. specifying a height of 100% makes a difference, but in the posted code, it shows up as 100% page height + top row height + bottom row height, forcing the page to scroll (can't do that).

Here are a couple of interesting experiments. I can produce the same over-scrolling results with this in IE:

height: 80px;

height: (not specified - looks great in FireFox, causes odd stretching in IE, unless doctype is removed)

height: 30px;

I can also produce the same odd scrolling results seen originally in IE, in Firefox like this:

height: 80px;

height: (not specified - looks great in FireFox, causes odd stretching in IE, unless doctype is removed)

height: 30px;

I'm thinking that IE doesn't like the mix of pixels with percents in a percent height table. No total solution yet. Any other thoughts? Thanks again for your help. :)

scrathcyboy

do you have any content = text in the middle row? If not, IE will resolve it to nothing.
at least put a   in it.

Also, IE 6does not handle % heights correctly.

As for the DOCTYPE, remove all of what you have and use this to test IE6 --

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

HTML

HEAD

(I had to leave out the angle brackets with this new EE editor, 
it is totally schitzoid, it won't allow any HTML tags inline)

Open in new window

ASKER CERTIFIED SOLUTION

torimar

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

scrathcyboy

Torimar -- I've never seen IE handle any relative height of an element properly. As far as I can tell, in IE, if you set the height as a %, that equates to ZERO (no height) until data goes into the cell to "fill it up". Even then, if there is too much data for a height of say 5%, it will STILL expand the cell to fit the contents, as do all browsers. Good luck with this, but it seems totally "normal" behaviour for M$ IE.

torimar

scrathcyboy,

even if this may be IE's "normal" behaviour, you seem to agree on the fact that it is still far from being correct. In order to force IE to behave as it is supposed to, the javascript I quoted above calculates the exact height of the table row on runtime and passes it on to the browser whenever the document is loaded or resized.

This is, of course a workaround, but it is a forceful one, and as far as I can tell, it appears to work correctly.