специи по вкусу

ВЯЧЕСЛАВ БАЕВ

Спецвыпуск: Хакер, номер #073, стр. 073-010-3

ЛИСТИНГ

/* IE5/Win Only Styles*/

@media tty {

i{content:”";/*” “*/}} @import url(’ie5win.css’); /*”;}

}/* */

А эта конструкция - только под IE 5 Mac:

ЛИСТИНГ

/* IE5/Mac Only Styles */

/*\*//*/

@import url(”ie5mac.css”);

/**/

А теперь совместим приятное с полезным, то есть conditional comments с подгрузкой CSS:

ЛИСТИНГ

<style type=”text/css”>

@import url(”css/all.css”) All;

</style>

<!–[if lt IE 7]>

<style type=”text/css”>

@import url(”css/all.css”);

@import “css/ie60.css”/**/;

@import\**”css/ie55.css”;

/*\*//*/@import “css/ie52.css”;/**/

_@import “css/ie50.css”;

</style>

<![endif]–>

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

[задача.]

Необходимо выровнять по центру вертикально расположенный контент.

[решение.]

Если одна строка текста, то все просто:

ЛИСТИНГ

<p>

Rovno odna stroka texta

</p>

Нужен такой CSS:

ЛИСТИНГ

p {

line-height:30px;

height:30px;

}

Если несколько строк или просто блочный элемент, тогда все гораздо сложнее. Для начала сформулируем проблему. У нас есть DIV (или любой блочный элемент) с заданной высотой, - какой-нибудь абзац текста P внутри этого DIV’a — известно лишь, что он (текст) точно поместится в заданную высоту DIV’a. Нужно отцентрировать этот текст по вертикали без использования таблиц.

Пускай HTML-код такой:

ЛИСТИНГ

<div>

<p>

Because the Welsh and Roman heritage was almost entirely erased by the invasion of low German and then Scandinavian populations...

</p>

</div>

Для всех браузеров, кроме winIE и macIE, работает такой CSS-код:

ЛИСТИНГ

div {

display: table-cell;

vertical-align: middle;

}

Для IE, как всегда, начинаем изобретать костыли.

Метод 1 (стили прямо в коде):

ЛИСТИНГ

<div style=”display: table; height: 400px; _position: relative; overflow: hidden;”>

<div style=” _position: absolute; _top: 50%;display: table-cell; vertical-align: middle;”>

<p style=” _position: relative; _top: -50%”>

any text<br />

any height<br />

any content, for example generated from DB<br />

everything is vertically centered

</p>

</div>

</div>

Метод 2 (более целесообразный, однако требует добавления в код пустого DIV или другого элемента):

ЛИСТИНГ

<div class=”wrap”>

<div class=”valign-center”>

<p>lenzi, e profondissima quiete</p>

<p>infinito silenzio a questa voce vo comparando: </p>

</div>

<div class=”just-for-IE”></div>

</div>

И теперь центрируем для всех нормальных через display: table-cell;vertical-align: middle;, а для IЕ используем извраты с height:100%; и display: inline-block:

ЛИСТИНГ

.wrap {

display: table-cell;

vertical-align: middle;

width: 100%;