I've got a situation where I'm trying to make a table which has two columns and 4 rows work right in both IE and FireFox. The first column only has one cell (rowspan='4'), while the 2nd column, the last row should expand to fill the unused space, since the 3 cells above it has small images. I've scraped out a lot of the contents of the page because of proprietary/copyright trash and to simplify matters. Please note, no comments about changing from table to div, etc. I have no control of the overall structure of the page, which is generated by multiple (sometimes independent) processes (please don't go there.). The only thing I have control over is the table with the green border and not its contents. In IE, the bottom cell of the 2nd column does the right thing, but in firefox, all the cells are the same height. Any ideas???
I know this stuff is a lot of jimble-jamble, but its what I've got to work with...


<!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=utf8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
height:100%;
}
</style>
</head>

<body style="margin: 0px;border:2px solid orange">


<table cellpadding=0 cellspacing=0 style="height:90%;width:100%;border:2px dotted blue">
<tr>
<td valign="top" style="height:100%">


<table cellpadding=0 cellspacing=0 style="height:100%" >
<tbody>
<tr valign="top" >
<td style="z-index:-2;height:95%">
<div style="height:95%;width:25ex;display: block;border:2px dashed red">




<!--[if IE]>
<div >
<![endif]-->
<![if !IE ]>
<div style="height:100%;">
<![endif]>

<div >
<img name="Image256" id="Image256" border="0" />
Some Title
</div>

<!-- this table (not its contents) is the only thing I can modify -->
<table style="height:90%;width:100%;" cellpadding="4" border='1' bordercolor='green'>
<tr>
<td rowspan="4" valign="top" style="width:20ex;height:90%">
<div >
<div style="height:25em"></div>


</div>
</td>
<td valign="top" height="20px">
<table border="0" cellspacing="0" cellpadding="1" width="100%">
<tr>
<td nowrap="nowrap" align="center"><a href="javascript: void 0;">
<img border="0"/>
</a></td>
</tr></table>

</td>
</tr>
<tr>
<td valign="top" height="20px">
<table border="0" cellspacing="0" cellpadding="1" width="100%">
<tr>
<td nowrap="nowrap" align="center"><a ><img border="0"/></a></td>
</tr></table>

</td>
</tr>
<tr>
<td valign="top" height="20px">
<table border="0" cellspacing="0" cellpadding="1" width="100%">
<tr>
<td nowrap="nowrap" align="center"><a ><img border="0"/></a></td>
</tr></table>

</td>
</tr>
<tr style="height:100%"><td >&nbsp;</td></tr>
</table>
<!-- end of table -->




</div>


</div>

</td>
<td >
<a > <img width=11 vspace=0 hspace=0 height=14 border=0 />
</a>
</td>
<td style="height:100%;width:100%">
</td></tr></table>

</body>
</html>