возврат

Рецепт 2. Декларация DOCTYPE

Проблема

Рецепт 1 “Три цветные колонки высотой в страницу” работает нормально, если не указывать при помощи декларации DOCTYPE стандарт, которому соответствует написанный HTML-код.

Если же такую декларацию указать:

Файл index.htm

  

то вид страницы изменится во всех браузерах.

Попробуем с этим разобраться, но сначала несколько слов о самой декларации DOCTYPE.

Декларация DOCTYPE

Элемент DOCTYPE предназначен для указания соответствия кода документа одному из стандартов. Браузер, в зависимости от стандарта, может по разному интерпретировать элементы на странице.

Элемент DOCTYPE — это, скорее, не элемент, а описание (декларация), имеющее свой собственный синтаксис.

Декларацию DOCTYPE помещают перед элементом HTML в коде, она начинается с восклицательного знака и записывается прописными буквами.

Варианты тега DOCTYPE для последней (и окончательной) версии HTML 4.01 приводятся ниже.

Предусмотрено 3 стандарта языка HTML 4.01:

Вариант Strict

Код не содержит элементов, помеченных W3C как “устаревшие” или “не одобряемые”.

  

Вариант Transitional

Код содержит устаревшие теги, вариант введен в целях совместимости со старыми версиями HTML.

  

Вариант Frameset

Аналогичен Transitional, но содержит также элементы для создания наборов фреймов.

  

Что будет, если DOCTYPE не указан

Джеффри Зельдман в статье “Почему так важен 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-колоночный код, если вставить декларацию

  

Посмотреть

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

IE 6
Страница в IE 6
FireFox 2
Страница в FireFox 2
Opera 9
Страница в Opera 9

Заметим, что указание 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;
}

Вверх вверх | возврат

© Александр Александрович Дуванов kurs@robotland.pereslavl.ru