Hi all,
I am having some trouble with some table code. It works fine in Internet
Explorer, but the layout doesn't work correctly in Firefox 1.0.7
Is this a firefox bug, or am I missing something in the HTML? It is pretty
simple code! (Plus it is valid according to the w3c validator)
The layout problem is in the third row. I cannot get the embedded table
(with the top and bottom cells) to be the full height of the cell (unless
I take out the second row). The HTML in the third row is identical to the
HTML in the first row.
I have attached the code below.
Cheers,
Ben
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test Page</title>
</head>
<body>
<form action="">
<table border="1">
<!-- This row is fine -->
<tr>
<td style="height: 100%">
<table border="1" style="height: 100%; width: 100%;">
<tr>
<td style="vertical-align: top; ">top</td>
</tr>
<tr>
<td style="vertical-align: bottom; ">bottom</td>
</tr>
</table>
</td>
<td><textarea rows="5" cols="10"></textarea></td>
</tr>
<!-- If this row is removed, then the next row works fine!!! -->
<tr>
<td>hmmm</td>
<td>what's going on???</td>
</tr>
<!-- This row is identical to the first, but the embedded table is not 100% height -->
<tr>
<td style="height: 100%">
<!-- This is the table that won't behave in Firefox!! -->
<table border="1" style="height: 100%; width: 100%">
<tr>
<td style="vertical-align: top;">top</td>
</tr>
<tr>
<td style="vertical-align: bottom;">bottom </td>
</tr>
</table>
</td>
<td><textarea rows="5" cols="10"></textarea></td>
</tr>
</table>
</form>
</body></html>
