Forum Moderators: open
I realize that several variations of the table height 100% issue have been discussed ad nauseum on the web, but I haven't found much discussion of this particular variation.
This is a simplification of what I'm actually trying to accomplish, for the sake of example.
Consider the following:
<!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>
<title>Untitled Page</title>
</head>
<body>
<table border="1">
<tr>
<td style="height: 100%;">
<table border="1" style="height: 100%;">
<tr>
<td>foo</td>
</tr>
</table>
</td>
<td>
<div style="height: 200px;">bar</div>
</td>
</tr>
</table>
</body>
</html>
In Firefox 1.5.0.11, the height of the "foo" table expands to 100% of the containing table.
In IE 7.0.5730.11, it doesn't.
What's up with that?
I know that setting an absolute height on the parent table will cause the "foo" table to expand to 100% height in IE. But, that doesn't suit my purposes. I want the height of the parent table to be determined by the height of the "bar" content, and have the "foo" table fill the height accordingly.
Is this possible?
Thanks.
You could try min-height as IE7 should support this.
- John
[edited by: JAB_Creations at 4:54 pm (utc) on April 16, 2007]
Having said that, I'm open to suggestions about how to make this layout using divs. :)
Here's a pic of what I'm trying to do:
<screenshot removed>
What we're looking at is the left edge of the main content area, with a gradient in the background. You'll notice a dropshadow over that gradient. Let's ignore the dropshadow for now. The main content area is horizontally centered, and a fixed-width, but with variable height - height is determined by the content. The vertical gradient needs to originate from the vertical centerpoint of the content area, and fade out to the top and bottom of the content area.
The way I would have approached this layout before XHTML rendering broke things, is to have a "layout" table with 3 columns. The first and last columns each contain a "gradient" table. The center column contains the content. Each gradient table extends to 100% of the height of the layout table. That way, the content is determining the height of the layout table, and the gradient table is just scaling to fill the space. Each gradient table would have 3 rows. The top and bottom rows would contain background images of the fade outs. The middle row would be a solid color, and would be vertically stretchable. That way, as the content grows vertically, the middle gradient row stretches, but the top and bottom "fadeouts" remain a fixed height.
Any ideas? I'm happy to provide more detail, if needed.
Oh, and setting min-height: 100% on the "foo" table didn't have any effect in IE 7.
Thanks again.
[edited by: encyclo at 7:28 pm (utc) on April 16, 2007]
[edit reason] no screenshots please, see forum charter [/edit]
