Menu
I have a page layout that is based on tables, and as much as I would like to restructure it with more modern markup, that is not an option. The layout uses a cell that spans two rows as a sidebar on the right side, while the upper left cell contains a simple header, and the lower left cell contains the main content of the page. The top left cell has a fixed height, and the height of the bottom cell and right cell is not specified. I have created a simplified example that illustrates my problem:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
.fixed { height: 100px; }
table { border: 1px solid #000; }
td { border: 1px solid #ddd; vertical-align: top; }
tr { border: 1px solid #cfc; }
* { padding: 15px; }
</style>
</head>
<body>
<table>
<tr class="fixed">
<td>left</td><td rowspan="2"><div style="height: 500px;">right</div></td>
</tr>
<tr class="stretch">
<td>left</td>
</tr>
<tr class="footer">
<td colspan="2">footer</td>
</tr>
</table>
</body>
</html>
I have set the height of the right column inline at 500px to simulate content that is taller than the height of the two left columns. This behaves as expected in modern browsers: The height of the top left cell remains fixed, and the lower cell stretches to fill the extra space. But in IE8, both left cells are stretched vertically. I need the top cell to keep its fixed height. How do I get IE8 to honor the height specified for the top left cell using only CSS?
Edit: Instead of setting the height on the right column td, I am setting the height on a div inside the right column.
242
I think Jeroen is right that there are no pure CSS solutions to this problem. Any time there are cells in a table with rowspan set, IE is going to ignore any explicit heights set on those rows. The solution is to never use rowspan. In my situation I was able to circumvent the problem by placing the content that was spanning two rows in the second row, leaving the cell in the first row empty, and using a negative margin to move the start of the content up into the first row. I hope this is helpful to somebody else. If anybody does have a pure CSS solution I'll accept that as the answer.
79
Interesting problem. Afraid the answer may be that there are no real solutions to the problem you describe, only workarounds. I found that adding some style to the second "left" td made the problem disappear, at least in your sample:
<td style="min-height: 500px;">left</td>
Hope that helps.
PS. IE9 had the same problem.
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
