В спецификации CSS предусмотрены правила min-width/min-height и max-width/max-height. К сожалению, Internet Explorer поддерживает эти правила только начиная с седьмой версии. Однако, это ограничение можно обойти.

Свойство min-height позволяет указать минимальную высоту для элемента. Если высота содержимого элемента окажется меньше его высоты, заданной правилом min-height, то высота элемента будет установлена на основании значения правила min-height. В противном случае блок растянется по своему содержимому.

style.css:

#element {
    min-height:300px;
    }

Как говорилось выше, В IE это будет работать только в седьмой версии. К счастью, в IE есть баг в обработке правила height. По сути, height ведет себя так же как и min-height, именно на этом основан наш workaround. Обратите внимание, что мы используем «star html hack», чтобы не задавать значение height для IE 7.

ie.css:

* HTML #element {
    height:300px;
    }

Обращу ваше внимание, что при использовании height для эмуляции min-height, overflow:hidden использовать нельзя, иначе в IE height начнет работать так же, как и в нормальных браузерах.

min-width, max-width

С эмуляцией минимальной и максимальной ширины все несколько сложнее. Для этого понадобится использовать IE-only правило expression (NB: это свойство не является валидным по текущему стандарту CSS и должно использоваться через conditional comments).

Хитрость в том, что внутри expression мы можем выполнять JavaScript.

#element {
    width:expression(some javascript goes here);
    }

Для задания минимальной ширины используем следующий expression:

ie.css:

* HTML #element {
    width:expression((document.body.clientWidth||document.documentElement.clientWidth)  > 760 ? 'auto' : '760px');
    }

Для минимальной и максимальной ширины одновременно:

ie.css:

* HTML #element {
    width:expression(document.body.clientWidth<=760?'760px':(document.body.clientWidth>1100?'1100px':'100%'));
    }

Данные правила, естественно, не будут работать у пользователей с отключенным JavaScript.

Материалы к изучению:

• min-width для IE
• max-width в Internet Explorer
• min-width for Internet Explorer without Java Script?
• Тонкий CSS для Internet Explorer (expression)

Авторство данного метода принадлежит Кэмерону Адамсу (Cameron Adams). Благодаря приведенной технике вы можете прижать ваш подвал к низу страницу при малом размере контента и сохранить нормальное положение вещей, когда контент требует вертикальной прокрутки.

<div id="header-content">
    <div id="header">
        Шапка сайта
    </div>
    <div id="content">
        Основная контентная часть
    </div>
</div>
<div id="footer">
    Подвал
</div>

Обратите внимание, что вся разметка макета, кроме подвала, должна быть заключена в контейнер, в данном случае div#header-content.

style.css:

html,
body {
    height:100%; /* Растягиваем документ на всю высоту окна */
    }
#header-content {
    position:relative;
    min-height:100%; /* Минимальная высота основной части макета */
    }
#content {
    padding-bottom:3em; /* Пространство необходимое, чтобы подвал не залезал на основную часть при большом количестве контента */
    }
#footer {
    position:relative;
    height:3em; /* Высота подвала, указывать необязательно, но полезно при разработке */
    margin:-3em 0 0; /* Поднимаем футер наверх */
    }

ie.css:

* HTML #header-content {
    height:100%; /* Эмулируем min-height для IE <7 */
    }

Материалы для изучения:

• footerStickAlt: A more robust method of positioning a footer
• footerStick

Поскольку мы уже сошлись на отказе от таблиц в пользу семантики, нам потребуется минимум html-кода:

<div class="announce">
    <img src="pic.gif" alt="" />
    <h2><a href="#">Россияне помогли</a></h2>
    <p>Полиция турецкого города Измир сообщила об аресте 17 участников группировки, занимавшейся мошенничеством и рассылкой вирусов в Сети.
     Арест произошел после того, как местные полицейские выяснили, что трое русских хакеров отправили в общей сложности миллион писем с
     вирусами и получили доступ к банковским счетам многих жителей Турции.</p>
</div>

Зададим картинке float, чтобы прижать ее налево и соответствующие макету поля:

.announce img {
    float:left;
    margin:0 10px 10px 0;
    }

К сожалению, текст обтекает картинку, а это совсем не то, что нам требуется по условию задачи. Чтобы запретить обтекание применим дополнительные стили к тексту:
style.css:

.announce p {
    overflow:hidden;
    }

ie.css:

.announce p {
    zoom:1; /* Для IE 7 */
   }
   * HTML .announce p {
        height:1%; /* Для IE 5,6 */
        }

Voila!

Внимательный читатель безусловно заметит, что для реализации задачи мы воспользовались правилами, указывающими Explorer’у на hasLayout. Таким образов еще раз показав их полезность.

Материалы для изучения:

• display:table
• Pup’s Box Flow Hack

Представим себе кусочек макета, присланного нам дизайнером. На нем изображено главное меню будущего сайта:

Пункт меню «Обратная связь» показывает поведение при наведении мышкой.

Если забыть на время про семантику, то наше меню можно представить в HTML приверно так:

<table id=”main-nav”><tr>
        <td><a href=””>Новости</a></td>
	  …
    </tr>
</table>

Набросать небольшой CSS, использовать Javascript для подсветки пункта при наведении мышкой и жить счастливо. Но не правильно.

При таком подходе мы теряем первичный структурный смысл нашей навигации. Любое меню — прежде всего список. Не даром мы говорим именно «пункт меню» и читаем книги, в которых оглавление более всего похоже именно на список.

Поэтому, вспомнив о семантике документа мы напишем код нашей навигации следующим образом:

<ul id=”main-nav”>
    <li><a href=””>Новости</a></li>
    …
</ul>

Первый шаг к светлому будущему. Однако наше горизонтальное меню в данный момент выглядит в браузере следующим образом:

По сравнению с табличным решением мы сразу сталкиваемся с двумя очевидными проблемами. Во-первых, визуально неуместными маркерами списка, а во вторых с тем, что пока данное меню принять за горизонтальное может только очень незаурядный ум.

Немного магии CSS

Начнем с решения двух вышеназванных проблем:

* {margin:0;padding:0;}
body {
    padding:40px;
    background:#FFF;
    font:100.01% Tahoma,Helvetica,sans-serif;
    color:#000;
    }
ul#main-nav {
    float:left; /* Предотвращаем эффект, при котором список не охватит внутри себя свои пункты. Это будет видно, если задать ul видимые границы */
    font:bold .75em Tahoma,Helvetica,sans-serif; /* Устанавливаем параметры шрифта */
    }
ul#main-nav li {
    float:left; /* «Прижимаем» элементы списка налево, эмулируя горизонталь */
    list-style:none; /* Убираем маркеры у пунктов списка */
    }

Я не буду здесь останавливаться на механизмах работы правила float, так о нем можно писать целые книги. Подробное объяснение на русском можно почепнуть в статье Ивана Сагалаева «Раскладка в CSS: float».

В итоге мы получили следующий результат:

Как видите, мы уже значительно ближе к намеченной цели. Осталось лишь дописать оформительские эффекты. Все было бы очевидно, если бы не одно — нам необходимо организовать подсветку пункта меню при наведении на него мыши.

Javascript? Не наш метод

В стандарте CSS 2.1, который является текущим, предусмотрен псевдоселектор :hover, благодаря которому мы можем менять стиль элемента по тому же принципу, как делаем при onmouseover при помощи Javascript. Одна проблема — IE шестой версии и ниже применяет :hover только к ссылкам. Флагманы технического прогресса, что уж тут скажешь.

Но не стоит отчаиваться. Поскольку наш список все-таки является навигацией, в нем совершенно очевидным образом находятся ссылки, к которым :hover в IE 5 и 6 можно применить без лишних проблем. Заодно на ссылки мы навесим и другие элементы оформления, такие как оступы, границы и цвет.

ul#main-nav li a {
    display:block; /* Делаем ссылки блочным элементом, чтобы они могли нативно работать с внутренними полями */
    position:relative; /* Небольшой «хак», чтобы в IE кликабельная область распространилась на внутренние поля */
    padding:4px 8px; /* Внутренние поля */
    background:#FFF; /* Цвет фона */
    border:1px solid #CCC; /* Границы */
    border-width:1px 0 1px 1px;
    color:#47AAE9; /* Цвет шрифта */
    }
    ul#main-nav li a:hover {
        background:#F2F2F2; /* Цвет фона при наведении на ссылку */
        color:#000; /* Цвет шрифта при наведении на ссылку */
        }

Осталась небольшая деталь. Так как мы не рисовали правую границу для ссылок внутри элементов списка — у нашего меню не хватает правой границы. Конечно можно было бы задать класс последнему элементу списка и переопределить нужные стили, но в данном случае можно сделать все проще и без лишней разметки. Достаточно лишь добавить границу самому списку.

ul#main-nav {
    float:left;
    border-right:1px solid #CCC;
    font:bold .75em Tahoma,Helvetica,sans-serif;
    }

Отлично, не правда ли? Мы добились не только нужного визуального отображения, но и поведения, при этом используя лишь семантически верную HTML-разметку и CSS.

У данного решения есть один минус — в Opera седьмых версий элементы списка не выстроятся линию, пока мы не зададим списку конкретную ширину. Это проблема продвинутого уровня и я не буду на ней останавливаться. Попытайтесь найти решение самостоятельно.

Разберем использование отрицательных полей на примере. Мы сверстаем трехколоночный макет с двумя фиксированными боковыми колонками, тянущейся центральной, шапкой и подвалом.

html:

<div id="header">
    Шапка
</div>
<div id="container">
    <div id="nav">
        Левая колонка
    </div>
    <div id="content">
        Контент
    </div>
</div>
<div id="sidebar">
    Правая колонка
</div>
<div id="footer">
    Футер
</div>

Обратите внимание на то, что левая и центральная колонки объединены общим контейнером. Именно для этого контейнера мы установим отрицательное поле, которое «подтянет» правую колонку.

style.css:

body {
    padding:20px;
    background:#FFF;
    color:#000;
    }
#header {
    padding:10px;
    background:#51CAC8;
    }
#container {
    float:left; /* Делаем контейнер плавающим, чтобы добиться нужного поведения */
    width:100%; /* Указываем контейнеру занимать все доступное пространство */
    margin:10px -170px 10px 0; /* Устанавливаем отрицательное правое поле, чтобы подтянуть правую колонку */
    }
#nav {
    float:left; /* Прижимаем блок налево */
    width:150px; /* Обращаем внимание, что фактическая ширина блока = 170 пикселям */
    padding:10px;
    background:#E73D00;
    }
#content {
    margin:0 150px 0 170px; /* Устанавливаем поля, чтобы контент не «налезал» на боковые колонки */
    padding:10px;
    background:#91CA00;
    }
#sidebar {
    float:right; /* Прижимаем блок направо */
    width:130px; /* Обращаем внимание, что фактическая ширина блока = 150 пикселям */
    margin-top:10px;
    padding:10px;
    background:#F5DC09;
    }
#footer {
    clear:both; /* Ставим подвал ниже самой длинной колонки */
    padding:10px;
    background:#DDDEDF;
    }

ie.css:

* HTML #nav {
    width:170px;
    w\idth:150px;
    }
* HTML #sidebar {
    width:150px;
    w\idth:130px;
    }
#footer {
    height:1%; /* Немного магии для IE5, неправильно считающего отступы */
    }

Это даст нам следующий результат:

Центральная колонка при этом будет тянуться пропорционально размерам рабочей области окна. Принципиальное отличие такого макета от таблицы с тремя ячейками заключается в том, что наши три колонки не будут одновременно тянуться по высоте, а будут занимать нужное им вертикальное пространство. При этом подвал всегда будет ниже самой длинной из них. Для того, чтобы эмулировать поведение ячеек таблиц, вам придется воспользоваться техникой faux columns.

Материалы для изучения:

• «Резиновая вёрстка»: используем отрицательные поля
• Faux Columns

Одна из ключевых особенностей cемантической валидной верстки — использование правильной блочной модели. Рассмотрим на примере, как она работает.

html:

<div id="parent">
    <div id="element">
        Lorem ipsum…
    </div>
</div>

style.css:

#parent {
    border:1px solid red;
    }
#element {
    width:200px; /* Ширина области контента */
    margin:40px; /* Поля */
    padding:20px; /* Отступы */
    border:4px solid #CCC; /* Границы */
    background:#F2F2F2;
    }

Визуальная ширина блока 248 пикселей, несмотря на то, что четко задана ширина в 200 пикселей. Дело в том, что по спецификации CSS визуальный размер блока складывается из суммы размера области контента, величины отступов и ширины границ. Заданное нами в CSS значение ширины (width) — на самом деле ширина области контента. Отсюда мы получаем визуальную ширину блока следующим образом.

Визуальный размер блока = 200 (ширина области контента) + 40 (сумма правого и левого отступов) + 8 (сумма правой и левой границ).

Для того чтобы четко задать визуальную ширину, при написании значений размеров в CSS нужно выполнить ряд нехитрых действий. Из желаемой визуальной ширины необходимо вычесть сумму обоих отступов и сумму обеих границ. Таким образом, чтобы изобразить блок шириной 200 пиксел, необходимо задать следующее значение правила width:

width = 200 (нужная визуальная ширина блока) — 40 (сумма правого и левого отступов) — 8 (сумма правой и левой границ).

Переопределим значение правила width в CSS.

style.css:

#element {
    width:152px; /* Ширина области контента */
    margin:40px; /* Поля */
    padding:20px; /* Отступы */
    border:4px solid #CCC; /* Границы */
    }

Нужный результат получен. Данные вычисления вначале могут показаться довольно сложными, но выработав привычку, вы будете выполнять их автоматически.

Неправильная блочная модель и кроссбраузерные проблемы

Даже при использовании полного правильного DOCTYPE, вы столкнетесь с ситуацией, когда блочная модель работает неправильно. Это связано с неправильной реализацией блочной модели в IE 5.x. В этом браузере визуальная ширина нашего примера вычисляется следующим образом:

Визуальная ширина блока = значению правила width.

Хотя такая модель может показаться более логичной, она не соответствует спецификации CSS.

Чтобы избежать различного отображения блоков в IE 5.x и более современных браузерах, необходимо применить хак с экранированием. Дело в том, что в CSS можно вполне законно экранировать символы (кроме A–F), и такие правила будут вполне корректно работать везде, кроме IE пятых версий. Так будет выглядеть хак, необходимый в данном примере:

ie.css:

* HTML #element {
    width:200px; /* Для пятых версий IE, некорректно обрабатывающих блочную модель */
    w\idth:152px; /* Для более старших */
    }

Для достижения такого же результата вы можете использовать и условные комментарии, подключая отдельный css-файл Internet Explorer версии 5.

Полезные ссылки

• Трюк с блочной моделью CSS
• Шпаргалка по CSS
• Modified SBMH (Simplified Box Model Hack)

CSS-хаки

При использовании семантической верстки каждый разработчик обязательно столкнется с проблемами кроссбраузерности, для решения которых в большинстве случаев приходится использовать так называемые «хаки». Обычно под этим термином подразумевается особый способ написания селекторов или правил, понимаемый только конкретным браузером. Однако совместимость с CSS в большинстве браузеров уже достигла уровня, при котором следует ограничивать использование «хаков».

Как правило, основным источником неприятностей бывает Internet Explorer. Многообразие ошибок в реализации CSS в браузерах Microsoft удивляет даже самых опытных верстальщиков. В связи с этим возникают ситуации, когда необходимо использовать дополнительные или альтернативные правила для IE. Именно в таких случаях рекомендуется применять «хаки». Если же вам вдруг понадобились альтернативные правила, скажем, только для Firefox, то рекомендуется пересмотреть ваш код, и в 99% случаев вы найдете более элегантное решение.

Наиболее популярным хаком на сегодня остается так называемый «star html hack»:

#element {
  position:relative; /* Основное правило  для всеx браузеров */
  }
  * HTML #element {
    position:static; /* Переопределение  правила для IE младше седьмой версии */
    }

В валидных HTML- и XHMTL-документах селектор HTML всегда играет роль корневого элемента, а BODY — потомка первого уровня, но не второго или более высокого уровня. Таким образом, теоретически селектор «* HTML» не должен применяться ни к одному элементу. Но на практике IE пятых и шестых версий из-за ошибки в собственном движке интерпретируют данный селектор как HTML и применяют указываемые правила. Поскольку остальные современные браузеры селектор «* HTML» игнорируют, этот прием можно использовать в корыстных целях. Это полезно, но правильно ли?

Несмотря на то что данный хак корректен с точки зрения стандарта CSS, есть ряд негативных нюансов.

Во-первых, слово «хак» звучит странно, и разработчику уже это должно не понравиться.

Во-вторых, такие хаки для браузера Internet Explorer засоряют код, подгружаемый и всеми остальными браузерами.

В-третьих, в этом хаке игнорируется недавно вышедший Internet Explorer 7.0, где был исправлен целый ряд ошибок в модуле CSS (более подробно об этом вы можете почитать непосредственно в блоге разработчиков IE7 по адресу blogs.msdn.com/ie).

Как же укротить Internet Explorer, не используя хаки?

Альтернатива синице

В недрах Microsoft Developer Network есть решение получше — conditional comments. Данная технология поддерживается в Internet Explorer, начиная с пятой версии, тем самым охватывая все интересующие нас браузеры. Ниже приводится пример элегантного использования условных комментариев:

<link href="style.css" rel="stylesheet" type="text/css" media="all" />
<!--[if IE]><link rel="stylesheet" type="text/css" href="ie.css" media="all"/><![endif]-->

Обычное подключение CSS-файлов, однако увидят вторую строку, а следовательно и подгрузят css-файл только браузеры семейства Internet Explorer. Происходит это благодаря условию, заложенному в условном комментарии — if IE. Данное условие означает «если Internet Explorer» и Explorer’ы версии пять и выше (включая свежий седьмой) прочитают код, находящийся внутри комментария и интерпретируют его.

Таким образом все наши хаки можно вынести в отдельный файл:

style.css:

#element {
    position:relative; /* Основное правило для всеx браузеров */
    }

ie.css:

#element {
    position:static; /* Переопределение правила для IE всех версий */
    }

Теперь мы не используем хаки в основном листе стилей; добились того, что альтернативное правило было применено ко всем Explorer’ам, включая седьмой; а также избавили пользователей альтернативных браузеров от загрузки лишнего кода. При этом мы сохранили наш (X)HTML и CSS валидным, так как такой условный комментарий не распознается никем иным кроме IE, включая даже валидатор от W3C.

Условные комментарии гибче, чем кажется на одном примере. Вы можете охватить не только все Explorer’ы, но и все его версии ниже или выше определенной или конкретную его версию; а также подгрузить код, который будут интерпретировать все браузеры, кроме Internet Explorer. К сожалению, это уже тема для отдельной статьи и с этими возможностями читателю следует ознакомится самостоятельно.

Материалы для изучения:

• раздел в Microsoft Developer Network
• Подробное объяснение синтаксиса и методологии использования
• О валидности синтаксиса условных комментариев не для IE

Укрощаем Internet Explorer или «магические правила»

Как уже говорилось выше, больше всего проблем верстальщику доставляют браузеры от Microsoft. Мы уже рассказали о том, как добавить отдельные правила только для Internet Explorer, но не коснулись того, какие же правила нам смогут помочь. Исправляем это досадное упущение.
Все перечисляемые ниже элементы управляют свойством hasLayout. hasLayout не является частью стандарта CSS и является скорее микрософтовской «заплаткой» для веб-разработчиков. Но и на том спасибо, как говорится.

Мы приводим только названия багов, для исправления которых применяются данные правила. Более подробное описание указываемых багов вы можете найти по адресу positioniseverything.net/explorer.html.

position:relative

• The IE/Win Disappearing List-Background Bug
• IE6 Border Chaos

Данное правило также часто применяется для спонтанно пропадающих блоков. Не падающих или неправильно отображающихся, а именно пропадающих. Особенно грешит этим Internet Explorer 5.0.

height:1%

• The IE6 Three Pixel Text-Jog
• The IE Escaping Floats Bug
• IE and italics (будьте осторожны с 5.0, используйте экранирование)
• IE/Win Unscrollable Content Bug
• IE/Win Guillotine Bug
• Quirky Percentages in IE6′s Visual Formatting Model

Применяется также для клиаринга элементов. Задается контейнеру, содержащему float’ы.

display:inline

• Floats, Margins and IE
• The IE Doubled Float-Margin Bug

display:inline-block;

• Quirky Percentages in IE6′s Visual Formatting Model

zoom:1

• Аналог height:1%; для IE 7.

И еще пара советов:
Во-первых, используйте данные правила по-возможности только для IE. Причем для разных версий решение может отличаться (наиболее часто это касается height:1% и zoom:1).
Во-вторых, столкнувшись с нежелательным поведением Explorer’а, которому нет документированного объяснения (или вам просто лень его искать) — попробуйте последовательно применить к проблемному элементу все правила, влияющие на свойство hasLayout. Шаманство — неотъемлемая часть нашей професии.

Материалы для изучения:

• hasLayout property в MSDN
• On having layout
• Магия для IE

Вместо вступления

В последнее время все чаще требованием при разработке сайта становится бестабличная или «дивная» верстка. Оба термина стали чрезвычайно популярны, несмотря на то, что они в корне неверны.

Изначально, таблицы были выбраны дизайнерами и разработчиками для верстки по одной единственной причине — не существовало других средств реализации хоть сколько-нибудь сложных макетов. Со временем таблицы стали нормой и остаются ею до сих пор. Но мы уже не в девяностых и браузеры, которые значатся в наших технических заданиях, способны интерпретировать CSS на том уровне, который необходим для более корректной, структурированной и современной верстки.

Именно ее мы называем семантической. Слово на первый взгляд довольно расплывчато, но в то же время лишено недостатков более популярного термина «бестабличная», который подразумевает всего лишь отказ от использования таблиц при реализации макетов. На самом деле все куда сложнее. Под семантической версткой мы подразумеваем следующее:

1. Таблицы используются для табличных данных, а не для визуального позиционирования элементов. К сожалению, мы живем не в идеальном мире и не всегда удается обойтись без этого архаизма, многие макеты просто требуют табличного поведения. Но перед тем как использовать таблицу не по назначению, каждый разработчик должен не раз подумать и попытаться избежать этого. Во многих случаях это вполне реально.
2. Каждый элемент HTML-кода должен нести структурный смысл. Наилучший способ этого добиться — просмотреть вашу страницу с отключенным CSS. Если списки визуально остались списками, а заголовки заголовками, то вы уже близки к семантике, к которой следует стремиться любому профессиональному верстальщику.
3. Разрабатываемый вами код соответствует стандартам (X)HTML и CSS. Семантика невозможна без валидности, несмотря на явную разность этих двух понятий. Вы можете сверстать валидный сайт, но без структурной разметки это будет всего лишь популизм.

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

Проблемы кроссбраузерности и их решения

Правильный DOCTYPE

Правильный DOCTYPE — это то, с чего должен начинаться любой сайт. Вы можете написать трижды правильный (X)HTML и СSS код, но с неправильным или отсутствующим DOCTYPE он не будет валидным и, что самое ужасное, будет работать неправильно.

Согласно спецификациям HTML и XHTML тег DOCTYPE, указанный в первой строке документа, указывает браузеру, какую именно версию (X)HTML вы используете в своем документе. Без указания DOCTYPE браузер будет воспринимать ваш документ в режиме Quirks mode, что приведет, в частности, к неправильной интерпретации блочной модели.

Правильный DOCTYPE обязан содержать полный абсолютный путь к файлу DTD, хранящемуся на серверах w3.org.

Использование правильного DOCTYPE — первый и необходимый путь к валидной кроссбраузерной верстке.

В этой статье мы используем указанный выше XHTML 1.0 Strict.

Подглядеть корректные DOCTYPE, а также подробнее узнать практическое значение этого тега можно в статье Джеффри Зельдмана в переводе Макса Россомахина «Почему так важен DOCTYPE».

Ластики

Одна из самых пространенных причин того, что сайт выглядит по-разному в разных браузерам вызвана тем, что браузеры по умолчанию оформляют многие элементы по-своему.

Для примера возьмем небольшой код:

<fieldset>
    <legend>Авторизация</legend>
    <label for="login">Логин:</label>
    <input id="login" maxlength="15" type="text" />
    <label for="password">Пароль:</label>
    <input id="password" maxlength="15" type="password" />
</fieldset>

Взгляните на результат в Firefox 2.0 (слева) и Internet Explorer 6 (справа):

Разница вызвана тем, что разные браузеры имеют различные значения для полей (margin) и отступов (padding). Разумеется, если задать конкретные величины в правилах для нужных элементов, то все исправится, но можно поступить проще.Существует замечательный селектор *, который выбирает все элементы в документе. Таким образом мы можем заранее обнулить значения для отступов и полей и в дальнейшем задавать их только тогда, когда дефолтные значения нас не устраивают. Эта, на первый взгляд мелочь, поможет вам избежать множества незначительных, но трудно находимых кроссбраузерных несоответствий и просто ошибок в процессе имплементации дизайна.

Добавим чуть-чуть CSS:

* {margin:0;padding:0;}

и посмотрим на результат:

Уже гораздо ближе к тому кроссбраузерному сооветствию, что мы ищем.

Подход к использованию «ластиков» у каждого свой и подобные стили по умолчанию каждый верстальщик должен выработать для себя самостоятельно. Это, как и стиль написания HTML и CSS, должно стать профессиональной привычкой, значительно увеличивающей вашу личную производительностью.

Во всех примерах нашей статьи вышеупомянутый «ластик» используется по умолчанию.

Материалы для изучения:

• «И отступили поля»
• YUI Reset CSS

#target {
    overflow:hidden;
    *overflow:visible; /* IE 5-7 */
    }