Столкнулся с проблемой при табличной верстке. Есть разметка таблицы: четыре столбца (это менять нельзя). Внутренний код выглядит следующим образом:
(В доктайпе пришлось "h**p://" покоцать).

Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h**p://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="h**p://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>#</title>
<style>
****td { vertical-align: top; }
</style>
</head>
<body>
<table width="100%" cellpadding="2" border="1" cellspacing="10">

<tr>
<td colspan="2" id="td_left"><div style="background: red;" id="div_left">xxxx
















</div></td>
<td colspan="2" id="td_right" rowspan="2"><div style="background: blue;" id="div_right">xxxx



























</div></td>
</tr>
<tr>
<td rowspan="2"><div>zzzz</div></td>
<td rowspan="2"><div>aaaa</div></td>
</tr>
<tr>
<td><div>bbbb</div></td>
<td><div>cccc</div></td>
</tr>

</table>
</body>
</html>
В Mozilla и Opera это работает отлично. Но в Internet Explorer 6 и Internet Explorer 7 ячейки таблиц растягиваются по высоте
В результате ячейки под ними оказываются значительно ниже, чем должны быть.

Живой пример: h**p://www.xhtmlplus.com/dll/bug.html

Пытался в стилях прописать _font-size: 0; для ячеек, которые растягиваются больше, чем надо, но такой вариант тоже не прокатил. (при большом кол-ве контента все равно растягивается).



Вторая проблема заключается в том, что эти два блока (назовем их условно "красный" и "синий") неизвестной высоты. Т.е. любой из них может быть больше другого по высоте. А ведь rowspan="2" должен иметь именно этот блок. Я написал простенький JavaScript для определения высоты блоков:

Код:
<script type="text/javascript">
****var tleft = document.getElementById(&#39;td_left&#39;);
****var tright = document.getElementById(&#39;td_right&#39;);
****var dleft = document.getElementById(&#39;div_left&#39;);
****var dright = document.getElementById(&#39;div_right&#39;);
****var lh = dleft.clientHeight;
****var rh = dright.clientHeight;
****
****if(lh > rh)
****{
 *tleft.rowSpan = 2;
****}
****else
****{
 *tright.rowSpan = 2;
****}
</script>
Но опять же в мозилле и опере работает отлично, а в интернет эксплорере 6 и 7 "clientHeight" просто не подхватывается. Перепробовал уже кучу вариантов. Может, у кого-нибудь будет свежее решение.

Живой пример: h**p://www.xhtmlplus.com/dll/bug2.html

P.S. Если я забыл указать какие-либо важные детали, стучитесь в ICQ: 315853465.

Заранее спасибо всем, кто откликнется.
Max P.