Форум XHTML.ru

DIMM DDR · 05.01.2009 18:14

Здравствуйте, уважаемые форумчане!

Мне нужно сделать что-то вроде этого:

Код:

<table style="width:100%; height:100%" border>
 <tr>
  <td rowspan="2" style="width:50%">
   <img src="" width="320" height="240"><br>
   <img src="" width="320" height="240"><br>
   <img src="" width="320" height="240">
  </td>
  <td>1111</td>
 </tr>
 <tr>
  <td style="height:100%">2222</td>
 </tr>
</table>

Т.е. нужна таблица на всё окно, разбитая на 3 ячейки. Ячейка с единицами должна "схлопнуться" по вертикали до минимума, ячейка с двойками - растянуться по вертикали до максимума. Если бы в левой ячейке не было картинок, всё отображалось бы нормально. Вопрос - как заставить это работать в Internet Explorer 6.0, не удаляя картинки?

Заранее спасибо!

PS В Opera 9.63 - никаких проблем...

ambientos · 08.01.2009 02:01

По-моему бред, требовать растянуться ячейку на 100% от высоты таблицы, если в этой таблице есть еще ячейки.
Т.е. в результате высота таблицы будет равна высоте таблицы + высота первой строки. 100% + 240px.

Теперь как достичь того, что вам нужно. Во-первых, убираем указание высоты 100% у ячейки.
Добавляем код CSS:
html, body { height: 100%; }
Все это будет работать, если на странице будет только одна эта таблица.

ambientos · 08.01.2009 02:02

Ваша проблема в том, что вы не понимаете, каким образом происходит расчет высоты, если вы указываете проценты.

DIMM DDR · 08.01.2009 10:05

ambientos, спасибо Вам за сообщение, однако, по существу Вы фактически ничего не сказали.

По-моему бред, требовать растянуться ячейку на 100% от высоты таблицы, если в этой таблице есть еще ячейки.

Согласен, в некотором отношении это выглядит абсурдно, но предложите тогда более корректный способ, заставляющий одну из ячеек сжиматься до минимума, а другую - растягиваться до максимума (пусть даже для простой таблицы из двух ячеек, расположенных горизонтально).

Теперь насчёт Вашего совета. Если я правильно Вас понял, имелось ввиду нечто вроде этого:

Код:

<html>

 <head>
  <style>
   html, body {height:100%}
  </style>
 </head>

 <body>
  <table style="width:100%; height:100%" border>
   <tr>
    <td rowspan="2" style="width:50%">
     <img src="" width="320" height="240"><br>
     <img src="" width="320" height="240"><br>
     <img src="" width="320" height="240">
    </td>
    <td>1111</td>
   </tr>
   <tr>
    <td>2222</td>
   </tr>
  </table>
 </body>

</html>

Ну, и что? По-вашему, это должно работать? Сами попробуйте запустить в IE и убедитесь, что это не так.

Ваша проблема в том, что вы не понимаете, каким образом происходит расчет высоты, если вы указываете проценты.

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

Маша · 07.02.2010 23:11

Такая же проблема. IE6 не правильно растягивает ячейку по высоте:

Код:

<table width="500" style="display:inline">
  <tr>
    <td width="50" height="50" valign="top" style="background-color:#993333;">
        <div style="width:50px;height:50px;background-color:#000066;"></div>
    </td>
    <td rowspan="2" height="150" style="background-color:#CCCC00;">
        &nbsp;
    </td>
  </tr>
  <tr><td>&nbsp;</td></tr>
</table>

Вот что получается в результате:

Красного квадрата - вообще не должно быть, так как левая верхняя ячейка должна иметь высоту 50 пикселей (как у синего квадрата)
А нижняя левая чейка, судя по всему, логично, должна растянутся по всей оставшейся высоте.

Вопрос остаётся открытым: как заставить IE6 - правильно отображать таблицу в подобных ситуациях ?

Снайпер · 08.02.2010 12:55

style="table-layout: fixed;"

Маша · 09.02.2010 08:29

Написала так:

Код:

<table width="500" style="table-layout: fixed;">
  <tr>
    <td width="50" height="50" valign="top" style="background-color:#993333;">
        <div style="width:50px;height:50px;background-color:#000066;"></div>
    </td>
    <td rowspan="2" height="150" style="background-color:#CCCC00;">&nbsp;
        
    </td>
  </tr>
  <tr><td>&nbsp;</td></tr>
</table>

Результат не удовлетворил:

IE6 не правильно обрабатывает высоту ячейки. (Хотя по русски ему говоришь поставь эту ячейку высотой писят - а на остальную оставь сколько влезет, нет ему нужно всё всегда по своему сделать!

Снайпер · 11.02.2010 16:44

rowspan="2" убери

Маша · 11.02.2010 16:55

Нет. - Это уже будет совсем другая таблица.
Правая ячейка должна растягиватся на всю высоту таблицы.
Верхняя левая и нижняя левая ячейки нужны по отдельности, причём нижняя не должна выходить за границы правой ячейки.
Но убрать rowspan, то есть ввобще отказаться от такой концепции таблицы - очень хорошая идея. Спасибо

Форум XHTML.ru

#1 05.01.2009 18:14

Internet Explorer 6.0 некорректно понимает <td style="height:100%">

Код:

#2 08.01.2009 02:01

Re: Internet Explorer 6.0 некорректно понимает <td style="height:100%">

#3 08.01.2009 02:02

Re: Internet Explorer 6.0 некорректно понимает <td style="height:100%">

#4 08.01.2009 10:05

Re: Internet Explorer 6.0 некорректно понимает <td style="height:100%">

Код:

#5 07.02.2010 23:11

Re: Internet Explorer 6.0 некорректно понимает <td style="height:100%">

Код:

#6 08.02.2010 12:55

Re: Internet Explorer 6.0 некорректно понимает <td style="height:100%">

#7 09.02.2010 08:29

Re: Internet Explorer 6.0 некорректно понимает <td style="height:100%">

Код:

#8 11.02.2010 16:44

Re: Internet Explorer 6.0 некорректно понимает <td style="height:100%">

#9 11.02.2010 16:55

Re: Internet Explorer 6.0 некорректно понимает <td style="height:100%">

Board footer