Столкнулся с проблемой при табличной верстке. Есть разметка таблицы: четыре столбца (это менять нельзя). Внутренний код выглядит следующим образом: <!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=windows-1251" /> <title>#</title> <style> td { vertical-align: top; } </style> </head> <table width="100%" cellpadding="2" border="1" cellspacing="10"> <!-- Block 2 --> <tr> <td colspan="2" id="td_left"><div style="background: red;" id="div_left">xxxx<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div></td> <td colspan="2" id="td_right" rowspan="2"><div style="background: blue;" id="div_right">xxxx<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></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> <!-- X. Block 2 --> В Mozilla и Opera это работает отлично. Но в Internet Explorer 6 и Internet Explorer 7 ячейки таблиц растягиваются по высоте В результате ячейки под ними оказываются значительно ниже, чем должны быть. <a href="http://www.xhtmlplus.com/dll/bug.html">Посмотреть пример</a> Пытался в стилях прописать _font-size: 0; для ячеек, которые растягиваются больше, чем надо, но такой вариант тоже не прокатил. (при большом кол-ве контента все равно растягивается). Вторая проблема заключается в том, что эти два блока (назовем их условно "красный" и "синий") неизвестной высоты. Т.е. любой из них может быть больше другого по высоте. А ведь rowspan="2" должен иметь именно этот блок. Я написал простенький JavaScript для определения высоты блоков: <script type="text/javascript"> var tleft = document.getElementById('td_left'); var tright = document.getElementById('td_right'); var dleft = document.getElementById('div_left'); var dright = document.getElementById('div_right'); var lh = dleft.clientHeight; var rh = dright.clientHeight; if(lh > rh) { tleft.rowSpan = 2; } else { tright.rowSpan = 2; } </script> Но опять же в мозилле и опере работает отлично, а в интернет эксплорере 6 и 7 "clientHeight" просто не подхватывается. Перепробовал уже кучу вариантов. Может, у кого-нибудь будет свежее решение. <a href="http://www.xhtmlplus.com/dll/bug2.html">Посмотреть пример</a> P.S. Если я забыл указать какие-либо важные детали, стучитесь в ICQ: 315853465. Заранее спасибо всем, кто откликнется. Max P.
Спасибо, Zombie, но ты не так понял. Проблема не в том, как сделать такую табличку, а в том, как победить Internet explorer в пересекающемся rowspan типа: <table> <tr> <td></td> <td rowspan=2></td> </tr> <tr> <td rowspan=2></td> </tr> <tr> <td></td> </tr> </table> Спасибо. Max P.
Я чего-то не понял, td-ки тут все вытягиваются, они не могут не вытягиваться другое дело div, которые ты воткнул. дык проставь им в стиль height=100%
clientHeight Проблему с clientHeight решил. Надо JavaScript просто было поставить после таблицы, а не внутри нее. Проблема с растягиванием <tr> все равно осталась. Без IE никак низзя. Спасибо. Max P.