IE8 altura da célula da mesa de alongamento
Eu tenho um layout de página baseado em tabelas e, por mais que eu queira reestruturá-lo com uma marcação mais moderna, essa não é uma opção. O layout usa uma célula que se estende por duas linhas como uma barra lateral no lado direito, enquanto a célula superior esquerda contém um cabeçalho simples e a célula inferior esquerda contém o conteúdo principal da página. A célula superior esquerda tem uma altura fixa e a altura da célula inferior e da célula direita não é especificada. Eu criei um exemplo simplificado que ilustra meu 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>
Definei a altura da coluna da direita em linha em 500px para simular um conteúdo mais alto que a altura das duas colunas da esquerda. Isso se comporta conforme o esperado em navegadores modernos: a altura da célula superior esquerda permanece fixa e a célula inferior se estende para preencher o espaço extra. Mas no IE8, as duas células esquerdas são esticadas verticalmente. Preciso da célula superior para manter sua altura fixa. Como faço para o IE8 honrar a altura especificada para a célula superior esquerda usando apenas CSS?
Editar Em vez de definir a altura na coluna da direita td, estou definindo a altura em uma div dentro da coluna da direit