Вопрос: Верстка ломается из-за доктайпа, что делать?
Верстаю сайт, весьма простой, но доктайп меня в очередной раз удивил. Есть шапка сайта, ширина 100%, градиентный фон, внутри по центру шапки большая картинка (тоже фоновая) и на ней по вертикали первый банер прилеплен к верху, следующая строка с рекламным текстом, и ниже еще один банер прилепленный ровно к нижней границе шапки. Делалось так,
<div id="header"> /*фон шапки*/
<div id="header_center"> /* здесь фоном картинка по центру*/
<div><img src="images/banner1.gif"/></div>
<div class="header_text">текст рекламы</div>
<div><img src="images/banner2.gif"/></div>
</div>
</div>
код css
body { font-size:12pt; text-align:center; font-family:Verdana; margin:0; padding:0; color:#fff; background-color:#FFFFFF;}
img { border:none; padding:0; margin:0;}
#header { font-size:16px; font-family:Myriad Pro; background:url('images/header_bg.gif') repeat-x; text-align:center;}
#header_center { background:url('images/header.gif') no-repeat center center;}
#header_center .header_text { padding-top:8px; height:36px;}
Вроде все просто, но вот почему-то фаерфокс и опера не приклеивают дивы с банерами к низу и к верху, все время получается какой-то отступ в 2-3 пикселя между картинкой с банером и дивом в котором стоит эта картинка. Причем я пробывала разными способами реализовать это, в том числе и через таблицы. Но косяк этот оставался. Причем в ИЕ отображалось все замечательно. Данная проблема решилась после того как я убрала доктайп.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> Но ведь все кричат что доктай нужен обязательно, типа без него это не профессионально и все такое... А как быть, если с ним такой косяк? может это как-то можно исправить? какой-нибудь хак написать? подскажите пожалуйста.