Почему все расползается и как с этим бороться

В этой статье обсуждаются проблемы CSS-верстки, или как ее называют
DIV-ной(верстки слоями). Предполагается что с самим понятием вы уже
знакомы, и владеете как html так и css. Идея отличная, css-файл
кэшируется, сама верстка занимает мало места, да и дизайн хорошо
отделяется от содержимого, нет этих громоздких таблиц, и вообще все
красиво и радужно, но есть одно НО... 
Но: начинающие(и не
только) сталкиваются с одной сложностью: вроде все сверстано правильно,
все размеры и границы указаны, а дизайн либо вообще ломается, либо

работает но в разных браузерах отображается по-разному, или в некоторых
работает а в некоторых ломается и расползается куда ни попадя... 

Знакомо? Давайте рассмотрим основные причины такого некорректного
поведения ваших страничек в браузерах и заодно я помогу вам с решением
этих сложностей: 

1. Неправильно указан или не указан DOCTYPE. А ведь браузер на него периодически обращает внимание, и по-разному отображает различные теги в соответствии с ним.
   Решение: W3C вам в помощь.
   См. также "Почему так важен DOCTYPE"
2. Вы пользуетесь WYSIWYG-редактором
   наподобие FrontPage или другого.... Что ж... в 80% случаях, при сложной
   верстке, кроссбраузерности вам с таким подходом не видать, особенно
   если вы начинающий(не в html и css, а в FrontPage или другом вашем
   любимом визивиге).
   Решение: либо
   бросить этот редактор и работать с Source-editor`ом(простым текстовым
   редактором, ну может быть с подсветкой синтаксиса, и кнопками вставки
   определенных тегов...), как настоящие джедаи, либо долго и упорно
   изучать сам редактор(html и css знать обязательно в любом случае, хотя
   бы общие правила). Дело ваше.
3. Ваша верстка неправильная.
   Если в коде куча ошибок, что ж удивляться неправильному отображению
   страницы? Набор тегов, их вложенность, наличие или отсутствие, значение
   аттрибутов - даже мелочи играют роль.
   Решение: Проверьте
   как следует ваш html и css-код на соответствие стандартам и
   спецификации объявленной в DOCTYPE. Придется покопаться с литературой.
4. Вы использовали в своем css селекторы, которые поддерживаются не всеми браузерами.
   Хоть и пришел в нашу жизнь css2, но браузеры так и остались отсталыми.
   Один вдруг начал поддерживать одни новые фичи, другой - другие... И все
   - разные, и по-разному. Даже если ваш код правильный и абсолютно
   валидный, далеко не факт что страничка будет отображаться так как
   задумано.
   Решение: Google вам в помощь.
5. Несоответствие размеров.
   Пример: вы объявили блок шириной 150px, а внутрь него пытаетесь
   поместить блок шириной 200px, или картинку размером 180х180, даже без
   указания размеров. В результате наш блок раздвигается в ширину по
   ширине самого широкого из вложенных в него элементов, сдвигая соседние
   блоки в сторону. Если для соседнего блока на странице или в корневом
   относительно него блоке не хватает места, он падает вниз, туда где
   места больше. И получается что страница разъехалась. Если же не все
   размеры указаны явно, то вся конструкция просто раздвинется, но
   смотреться это будет все равно некрасиво, и вычислить такую ошибку не
   очень то просто.
   Решение: БУДЬТЕ БДИТЕЛЬНЫ! Программных
   способов борьбы с этим, насколько я знаю, не существует. Браузер
   считает что так все и задумано.
6. Значения по умолчанию.
   А знаете ли что браузер для каждого элемента устанавливает свои
   отступы, границы, межстрочные интервалы и прочие аттрибуты, которые вы,
   создавая страницу, возможно считаете равными нулю? Что ж, знайте. Но
   это еще не самое страшное. Каждый браузер устанавливает свои значения по умолчанию для этих аттрибутов, и по-разному их обрабатывает.
   Решение:
   Первым делом нужно сбросить значения основных аттрибутов для основных
   блочных тегов и установить свои. Причем сначала именно обнулить:
   /*style.css*/
   html, body, div, p, table, pre, td, tr, th, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, img, blockquote, iframe {
   margin: 0;
   padding: 0;
   border: 0;
   }
   Уже после чего для каждого элемента устанавливать свои значения. Трудоемко но дает ощутимый эффект!
7. Нюансы
   - прочие мелочи, которые не входят в отдельные пункты списка и
   проявляются периодически. Например знаете ли вы что если в конце
   строки(в коде) перед переносом строк поставить пробел, даже(и даже
   особенно!) между тегами, то пробел будет отображаться на странице?
   Пример из жизни: составить DIV-ный шаблон, в котором шапка
   из картинок. Все размеры указаны корректно, объявлен блок по ширине
   равный сумме ширин картинок, границы и отступы для картинок в этом
   блоке убраны в нулевое значение... Расползается! Пересчитали, проверили
   в блоке. Вот хоть убей, крайняя вниз лезет! А оказалось все просто:
   
 <img src="img1.gif"> 
      <img src="img2.gif"> 
   Кстати, этот глюк никак не проявляется в браузере Opera, что лишний раз указывает на то что проверка одним браузером - не дает полной уверенности в верстке.
   Или вот еще: тег <img> ведет себя очень даже некорректно при указании аттрибута align:
   если center - он виснет в центре, тут вроде все правильно. А если
   указать "left" или "right" - начинает чудить, а именно - нарушать
   вложенность тегов. Даже если он вложен в параграф, и аттрибут align
   указан для того чтобы текст красиво обтекал картинку, есть нюанс: если
   картинка по высоте больше этого текста, то следующий параграф, как строчный тег
   будет обтекать эту же картинку. И плевал IE на вложенность тегов и
   понятие блочности и строчности. Помогает следующее: добавляем в тег
   аттрибут style="display:inline".
   Решение: все приходит с опытом... если конечно есть осознание. Учитесь, практикуйтесь, читайте статьи и книги. 

Главное - это не идти на компромисс с ошибками, а добросовестно с ними
бороться и добиваться поставленной задачи. Желаю всем верстальщикам,
вебмастерам, веб-программистам и прочим web-разработчикам безошибочной
верстки и успехов во всех проектах.