Гостевая
Форум
Разделы
Главная страница
Js скрипты
Php скрипты
Html шаблоны
Книги по Web дизайну
Статьи


Главная страница статей --> Хитрости при программировании php, заметки по базам данных

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

Источник: 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, не забыв, тем не менее, указать в таблице стилей приведённое выше решение для растягивания канвы.



Похожие статьи:
- Киберсквотинг и киберсквотеры
- Ода раскрутке
- Определение размера удаленного файла
- Эффект плавного перехода на JavaScript
- Комплекс Denwer: Apache+PHP+MySQL+Perl за 5 минут
- Опрос с помощью AJAX
- Фиксирование шрифтов на странице с помощью таблицы стилей
- Свойства текста
- Установка сервера Apache 2 + Perl + PHP
- Два источника World Wide Web
- Два стиля ajax’а
- Страсти вокруг AJAX накаляются
- Чем отличаются id и class


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