Рецепт 1 “Три цветные колонки высотой в страницу” работает нормально, если не указывать при помощи декларации DOCTYPE стандарт, которому соответствует написанный HTML-код.
Если же такую декларацию указать:
Файл index.htm
то вид страницы изменится во всех браузерах.
Попробуем с этим разобраться, но сначала несколько слов о самой декларации DOCTYPE.
Элемент DOCTYPE предназначен для указания соответствия кода документа одному из стандартов. Браузер, в зависимости от стандарта, может по разному интерпретировать элементы на странице.
Элемент DOCTYPE — это, скорее, не элемент, а описание (декларация), имеющее свой собственный синтаксис.
Декларацию DOCTYPE помещают перед элементом HTML в коде, она начинается с восклицательного знака и записывается прописными буквами.
Варианты тега DOCTYPE для последней (и окончательной) версии HTML 4.01 приводятся ниже.
Предусмотрено 3 стандарта языка HTML 4.01:
Код не содержит элементов, помеченных W3C как “устаревшие” или “не одобряемые”.
Код содержит устаревшие теги, вариант введен в целях совместимости со старыми версиями HTML.
Аналогичен Transitional, но содержит также элементы для создания наборов фреймов.
Джеффри Зельдман в статье “Почему так важен DOCTYPE” (www.webmascon.com/topics/coding/25a.asp) пишет:
Если вы будете пользоваться неполным тегом DOCTYPE, устаревшим его видом, или вообще забудете про него, браузер перейдет в “загадочный” режим и будет исходить из предположения, что вы писали код страницы с ошибками и вольно отступали от стандартов, т. е. так, как писали в конце 90-ых годов.В этом режиме броузер попытается разобрать вашу страницу по правилам обратной совместимости и выведет на экран, например, CSS так, как его вывел бы Internet Explorer 4-ой версии, а DOM будет работать так, как он работал именно в этом браузере (IE переключается в свой старый DOM, а Mozilla и Netscape 6 переключается вообще в бог знает что).
Андрейка Лечев (студия Артемия Лебедева) в статье “Тип документа: объявлять или не объявлять?” (www.artlebedev.ru/tools/technogrette/html/doctype) пишет:
Авторы умных книг по HTML, автоматические валидаторы и Джеффри Зельдман (Jeffrey Zeldman) утверждают, что по правилам хорошего тона использовать его нужно всегда. Если учесть тот факт, что многие сайты прекрасно отображаются в браузерах и без него, возникает резонный вопрос: “А нужен ли <!DOCTYPE> на самом деле?”. Путем несложных рассуждений попытаемся это выяснить....
Если вы считаете нужным указать <!DOCTYPE>, будьте любезны сделать так, чтобы ваш HTML соответствовал стандартам без исключений. Либо допустите исключения, если вам нужен стандартный режим отображения. Во всех остальных случаях <!DOCTYPE> вам не требуется. Поверьте на слово
К сожалению я не мог нигде найти внятного алгоритма поведения браузеров при отсутствии DOCTYPE, равно как и при его присутствии.
Посмотрим, как браузеры интерпретируют наш 3-колоночный код, если вставить декларацию
Ниже на рисунках показ вид страницы в трёх популярных браузерах.
Заметим, что указание height:100% действует только в абсолютно позиционированных блоках, а в браузере IE 6 не действует ни на один блок — высота определяется по контексту.
Зададим абсолютное позиционирование и центральному блоку (без каких либо его сдвигов).
Теперь в Opera 9 и FireFox 2 всё отображается, как задумывалось, а в IE 6 все осталось по-прежнему.
Понятно, что поведение IE 6 при указании height:100% не выдерживает никакой критики. Это явный ляп браузера. И, действительно, в браузере IE 7 он исправлен.
Ниже приводится HTML-код примера и таблица стилей (правки выделены цветом).
Файл index.htm
Файл style.css
/* Заголовок и логотип */ BODY { margin:0px; padding:0px; } .title { position: absolute; z-index:5; /* Блок расположен поверх других блоков */ left:0px; top: 0px; width: 100%; height: 100px; margin:0px; padding:0px; border-bottom: 1px solid black; background: #06DFE1; } /* Оболочка левой колонки */ .leftroot { position: absolute; z-index:4; /* Ниже заголовка, но выше центральной колонки */ left:0px; top: 0px; width: 150px; height:100%; margin: 0px; padding: 0px; background: #FFE3CC; } /* Левая колонка */ .left { padding: 110px 10px 10px 10px; } /* Оболочка правой колонки */ .rightroot { position: absolute; z-index:4; /* Ниже заголовка, но выше центральной колонки */ right:0px; top:0px; width: 200px; height:100%; margin: 0px; padding: 0px; background: #E5E5E5; } /* Правая колонка */ .right { padding: 110px 10px 10px 10px; } /* Оболочка центральной колонки */ .centerroot { position: absolute; z-index:0; /* Ниже всех других областей */ width: 100%; height:100%; margin: 0px; padding: 0px; background: #FFF2A6; } /* Центральная колонка */ .center { padding: 110px 210px 10px 160px; } /* Подвал */ .bottom { font-size:70%; font-family:sans-serif; margin-top:10px; border-top: 1px solid black; }