Javascript-форум - table в opera.

Javascript-форум (https://javascript.ru/forum/)

- (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)

- - table в opera. (https://javascript.ru/forum/xhtml-html-css/7212-table-v-opera.html)

Имеется вот такая таблица:

<table cellspacing="10" style="width:100%; height:100%;">
 <tr>
  <td style="width:auto; height:auto; background:#009000;"> ячейка №1</td>
  <td rowspan="2" style="width:300px; height:100%; background:#cc0000;">
   <div style="width:100px; height:100%; background:#ccff00;"></div>
  </td>
 </tr>
 <tr>
  <td style="width:auto; height:100px; background:#ccee00;">ячейка №3</td>
 </tr>
</table>

При изменении размеров окна браузера в "Opera" ячейка №3 "срывается" и увеличивается в размере. Если же убрать из второй ячейки блок или задать ему высоту в пикселях - всё работает нормально.
В чем проблема непонимаю, может кто сталкивался ?
И есть ли вариант такой же верстки на блоках ? :)

На блоках можно, например, так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
html { height: 100%; }
body { position: relative; margin: 0; min-height: 100%; min-width: 770px; }
div#layout-center
{ position: relative; padding: 10px 320px 120px 10px; z-index: 1; }
div#layout-right
{ position: absolute; top: 10px; right: 10px; bottom: 10px; width: 300px; background: #cf0; }
div#layout-bottom
{ position: absolute; bottom: 10px; left: 10px; right: 320px; height: 100px; background: #c00; }
div#layout-background
{ position: absolute; left: 10px; top: 10px; right: 320px; bottom: 120px; background: #008000; }
</style>
<!--[if lt IE 7]><style type="text/css">
body { height: 100%; }
div#layout-background
{ width: expression(parentNode.clientWidth - 330); height: expression(parentNode.clientHeight - 130); }
div#layout-right { height: expression(parentNode.clientHeight - 20); }
div#layout-bottom { width: expression(parentNode.clientWidth - 330); }
</style><![endif]-->
</head>
<body>
<div id="layout-center">content</div>
<div id="layout-right">right</div>
<div id="layout-bottom">bottom</div>
<div id="layout-background"></div>
</body>
</html>

При верстке таблицами не используйте colspan и rowspan, хотя бы для первой строки. Иначе проблем, типа вот такой вот, не оберетесь.

Всем спасибо, решил эту проблемку немножко по другому.. не знаю хорошо это или нет? Часть сделал через свойства, в основном это ширина блоков, а высоту некоторых пересчитавал через JS при onload и onresize. )

PepeL,
вложенные таблицы религия не позволяет использовать? :)

subzey,
Да нет, просто многие кричат что таблицы это жуть как страшно... но убедительных доказательств в их ужастности так нигде и не нашел. Вот и не знаю кого слушать, а кого нет )

Цитата:

Сообщение от PepeL

Да нет, просто многие кричат что таблицы это жуть как страшно... но убедительных доказательств в их ужастности так нигде и не нашел. Вот и не знаю кого слушать, а кого нет )

после того как научился верстать блоками - увидел разницу. почти в двое меньше тегов, а гибкость намного выше таблиц + рендеринг быстрее и отображение сайта при загрузке тоже.

PeaceCoder,
А помимо субьективных наблюдений, кто-нибудь проводил уже обьективные тесты ?
На счет количества тегов согласен )

PepeL,
никого не слушайте. Гибридная верстка завсегда лучше. :)

Цитата:

Гибридная верстка завсегда лучше.

Больше нравится прицип "от печки" - там где можно сделать блоками - делаем блоками, и только в том случае если без таблиц никак - <table> (что бывает нечасто)