IE8 estirando la altura de la celda de la mesa
Tengo un diseño de página que se basa en tablas, y por mucho que me gustaría reestructurarlo con un marcado más moderno, esa no es una opción. El diseño utiliza una celda que abarca dos filas como una barra lateral en el lado derecho, mientras que la celda superior izquierda contiene un encabezado simple y la celda inferior izquierda contiene el contenido principal de la página. La celda superior izquierda tiene una altura fija y no se especifica la altura de la celda inferior y la celda derecha. He creado un ejemplo simplificado que ilustra mi problema:
<!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>
He establecido la altura de la columna derecha en línea en 500 px para simular contenido que es más alto que la altura de las dos columnas izquierdas. Esto se comporta como se esperaba en los navegadores modernos: la altura de la celda superior izquierda permanece fija, y la celda inferior se estira para llenar el espacio extra. Pero en IE8, ambas celdas izquierdas se estiran verticalmente. Necesito la celda superior para mantener su altura fija. ¿Cómo consigo que IE8 respete la altura especificada para la celda superior izquierda usando solo CSS?
Editar En lugar de establecer la altura en la columna derecha td, estoy configurando la altura en un div dentro de la columna derecha.