Изменение фона в таблице Анимационное подчеркивание

Кроссбраузерное выравнивание по центру

Время от времени меня спрашивают, как заставить работать следующий код в Opera 7.0, а также в Internet Explorer 6 и Mozilla, когда страница в режиме Standards compliance mode:

<br />
<table width="100%" height="100%">
<tr>
<td align="center">текст, который должен располагаться в центре страницы</td>
</tr>
</table>
<p>

Почему текст получается прижатым к верхней границе документа, вместо того, чтобы расположиться в центре? Прежде всего дело в том, что в спецификации HTML 4.01 у тега table нет атрибута height, и поэтому браузеры в режиме совместимости со стандартами (а Opera 7.0 в любом случае) его игнорируют. Но самое интересное, что они перестают его игнорировать, если в CSS указать следующую конструкцию для растягивания канвы документа:

html,body{<br />
height:100%;<br />
margin:0px;<br />
padding:0px<br />
}

Собственно, вам даже не нужно что-то менять в самом HTML коде, в котором у вас прописана (быть может давно, когда вы и не думали, что когда-нибудь height могут «отменить») высота таблицы.

Предвидя вопросы, хочу сделать пару замечаний по приведённому стилевому описанию.

Во-первых, нужно указывать оба элемента html и body, так как просто body недостаточно. Например, для Mozilla в Standards compliance mode канвой является именно элемент html, а не body.

Во-вторых, если убрать обнуление margin и padding, то опять же в режиме совместимости со стандартами у страницы появится неприятная вертикальная полоса прокрутки.

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

Добавить в:
Google slashdot YahooMyWeb Digg Technorati Delicious Забобрить эту страницу! Добавить на Newsland.ru Добавить на СМИ2 Добавить на Ваау! Добавить на RUmarkz Добавить на rucity.com Добавить в закладки МоёМесто.ru

Css Дизайнер (designer)

Постоянные ссылки

При копировании ссылка на Заметки дизайнера обязательна!

URI

Html (ЖЖ)

BB-код (Для форумов)

Написать коммент

Вы должны войти, чтобы оставить коммент.

Trackback на эту запись  |  Комменты по RSS


Рекламка в тему

Рубрики

Архив по месяцам

Друзья

Мета