Столкнулся с проблемой при табличной верстке. Есть разметка таблицы: четыре столбца (это менять нельзя). Внутренний код выглядит следующим образом:
(В доктайпе пришлось "h**p://" покоцать).
В Mozilla и Opera это работает отлично. Но в Internet Explorer 6 и Internet Explorer 7 ячейки таблиц растягиваются по высоте [Only registered and activated users can see links. Click Here To Register...]Код:<!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>
В результате ячейки под ними оказываются значительно ниже, чем должны быть.
Живой пример: h**p://www.xhtmlplus.com/dll/bug.html
Пытался в стилях прописать _font-size: 0; для ячеек, которые растягиваются больше, чем надо, но такой вариант тоже не прокатил. (при большом кол-ве контента все равно растягивается).
Вторая проблема заключается в том, что эти два блока (назовем их условно "красный" и "синий") неизвестной высоты. Т.е. любой из них может быть больше другого по высоте. А ведь rowspan="2" должен иметь именно этот блок. Я написал простенький JavaScript для определения высоты блоков:
Но опять же [Only registered and activated users can see links. Click Here To Register...] в мозилле и опере работает отлично, а в интернет эксплорере 6 и 7 "clientHeight" просто не подхватывается. Перепробовал уже кучу вариантов. Может, у кого-нибудь будет свежее решение.Код:<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>
Живой пример: h**p://www.xhtmlplus.com/dll/bug2.html
P.S. Если я забыл указать какие-либо важные детали, стучитесь в ICQ: 315853465.
Заранее спасибо всем, кто откликнется.
Max P.
