Главная страница статей --> Советы по фотошопу, графике и хитрости в построении php кода

Кроссбраузерное выравнивание по центру (table height=100%)

Источник: realcoding.net

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

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

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

html,body{
height:100%;
margin:0px;
padding:0px
}

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

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

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

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

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



Похожие статьи:
- Десять правил написания безопасного кода на PHP
- CSS: советы и приёмы, часть 2
- Создание системы учета посещений
- Как узнать размер файла на каком-то веб-сервере
- Избавляемся от cellpadding и cellspacing
- Особенности ссылок «вверх страницы»
- Дизайнер и заказчик. Какой нужен сайт?
- Новый формат SVG создаст конкуренцию Flash?
- PHP и XML
- Этика и нравственность в Internet
- Динамическое изменение элементов в списке SELECT
- Email без СПАМА
- Оптимизация форума под поисковые системы


Оглавление | Обсудить на форуме | Главная страница сайта | Карта сайта |

Контакты
Редакция:
[0.001]