HTML. Не соблюдается вертикальный размер ячейки таблицы в IE
Очень много основной работы, никакими другими проектами до Нового года, думаю, не займусь... Но всё же выкраиваю для них время. Так как разметкой HTML тоже давно не занимался, встала тупая проблема, а решить "навскидку" не могу. Имеем простую табличку HTML:
<table width="600" align="center" border="1" cellpadding="4" cellspacing="0">
<tr>
<td height="120" width="120" nowrap> </td>
<td rowspan="2" valign="top">
text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>
</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
Документ снабжён заголовком
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
validator.w3.org на него не ругается, пишет "successfully checked as HTML 4.01 Transitional". Во всех браузерах (Opera, Firefox, Chrome) выглядит так, как я и ожидал, размер верхней левой ячейки, указанный явно, соблюдается):
Таблица в Opera, Firefox или Chrome
IE 8 же попросту "кладёт" на размер ячейки, указанный явно:
Та же таблица в IE8 - неправильное форматирование?
Указывать что-то типа height="500" нижней левой ячейке нелепо - очевидно, что содержимого в правой ячейке может быть сколько угодно, а слева могут быть фоны и проч.
Сделанное по совету вот это
<table width="600" align="center" border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="0" nowrap>
<img src="void.gif" width="0" height="120" hspace="0" vspace="0" alt=""></td>
<td height="120" width="120" nowrap> </td>
<td width="100%" rowspan="2" valign="top">
text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>
</td>
</tr>
<tr>
<td width="0" nowrap>
<img src="void.gif" width="0" height="100%" hspace="0" vspace="0" alt=""></td>
<td> </td>
</tr>
</table>
абсолютно не помогло, а если указать height="100%" нижней левой ячейке ширины 0, то ещё и в Firefox перестаёт работать. Попробовал просто вместо жестких пробелов прозрачные гифки подставить - тож не помогло.
C вложением таблиц (border=1 оставлено для наглядности), вроде бы, всё выглядит нормально:
<table width="600" align="center" border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="120" valign="top">
<table border="1" width="100%" height="100%"
cellpadding="0" cellspacing="0">
<tr>
<td height="120" nowrap> </td>
</tr>
<tr>
<td height="100%" wrap><img src="void.gif"
width="0" height="100%" hspace="0" vspace="0" alt=""></td>
</tr>
</table>
</td>
<td valign="top">
text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>
</tr>
</table>
Проба с вложением таблиц...
(height="100%" для всей таблицы и атрибут wrap - не по стандарту, но их можно убрать), однако, это тоже не помогло - нижняя ячейка вложенной таблицы всё равно не тянется при заполнении содержимым правого столбца...
Пришлось просто менять и резать макет сайтега пока что...
P.S. Похоже, что для ИЕ для точного указания размеров столбцов в левой колонке надо точно указать размеры всех ячеек так, чтоб сумма высот ячеек слева равнялась высоте ячейки справа.
07.11.2010, 16:56 [12037 просмотров]