таблицы+ ie7+ (chrome + FF)

[tt48]

Доброго времени суток.

Задача следующая - сделать слой высотой {100% - 90px снизу - 90px сверху}

Нужна стабильная работа под ie7 и дальше.

http://www.beavers-net.narod.ru/primers/tableXie7.html

Проблемы две -

1) ie7 ни за что на свете не желает делать врехнюю и нижние строки таблицы по 90px;

2) Chrome, FF3.6 не хотят отображать абсолютно позиционированный слой внутри релативной ячейки.

Слой занимает в данном случае 100% от экрана и идет поверх всей таблицы.

Про box-sizing помню.. но не знаю его эквивалента под ie

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

С уважением, Олег.

[Great Rash]

2) Chrome, FF3.6 не хотят отображать абсолютно позиционированный слой внутри релативной ячейки.

И правильно делают ибо так положено по спеке.

Ваша проблема решается без таблиц:

<div style="height: 90px; background: red;">
  Header
</div>

<div class="body" style="position: absolute; top: 90px; bottom: 90px; overflow: auto; width: 100%;">
  Body
</div>

<div style="height: 90px; background: red;">
  Footer
</div>

Для ИЕ7 надо будет написать экспрешн:

<!--[if lte IE 7]>

<style type="text/css">

.body {
  height: expression(document.body.clientHeight - 180 + 'px'); /* 90 + 90 = 180 */
}

<![endif]-->

UPD: Чёт ща подумал... Наверное ИЕ7 поймет и без экспрешна, хотя хз.

UPD2: Если все-же хочется таблицей, то надо просто сменить доктайп на Transitional (или вообще на HTML4). При XHTML Strict в ИЕ7 таблицы себя дебильно ведут.

[tt48]

Для таблиц отдельные правила чтоли?(по поводу слоёв абсолютных)

Если можно - ткните носом, а то я сам не найду и так и останется шаманством.

http://www.w3.org/TR/CSS21/visuren.html#comp-abspos

С утра как раз думал о таком решении)

Таблица изначально только ради IE придумывалась.

Expression потребуется для IE6.

В IE7 и так работает замечательно.)

Спасибо большое за столь полезную информацию - пополню копилку)

С уважением, Олег.

Edited April 21, 2011 by tt48

[Great Rash]

Для таблиц отдельные правила чтоли?(по поводу слоёв абсолютных)

Если можно - ткните носом, а то я сам не найду и так и останется шаманством.

9.2 Controlling box generation

Not all block container boxes are block-level boxes: non-replaced inline blocks and non-replaced table cells are block containers but not block-level boxes.

Затрудняюсь перевести эту игру слов и полёт мысли автора Но смысл такой что ячейки таблицы хоть и блоки, но не такие как дивы, параграфы и т.п. элементы. Короче таблицы особенные.

[tt48]

Большущее спасибо)

[psywalker]

Всё должно решиться простым путём. Добавлением ячейкам блочности.

И правильно делают ибо так положено по спеке.

Ваша проблема решается без таблиц:

<div style="height: 90px; background: red;">
  Header
</div>

<div class="body" style="position: absolute; top: 90px; bottom: 90px; overflow: auto; width: 100%;">
  Body
</div>

<div style="height: 90px; background: red;">
  Footer
</div>

Для ИЕ7 надо будет написать экспрешн:

<!--[if lte IE 7]>

<style type="text/css">

.body {
  height: expression(document.body.clientHeight - 180 + 'px'); /* 90 + 90 = 180 */
}

<![endif]-->

UPD: Чёт ща подумал... Наверное ИЕ7 поймет и без экспрешна, хотя хз.

Да, в ИЕ7 эта хрень пашет изначально, что странно)

[tt48]

Добавление ячейкам блочности решает проблему с позиционированием слоя в хроме,

но добавляет проблему со схлопыванием ячейки до автоматической высоты(при height:100%) в Опере 11.