Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Почему сползает блок ?

Автор: svch 24.9.2009, 22:44

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

Подскажите, как сделать, чтоб данный код одинаково отображался в браузерах ?

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<HTML>
<HEAD>
<TITLE>Untitled</TITLE>
</HEAD>

<BODY>

<div style="float: left; width: 200px; height: 200px; background: #FF8000">111</div>
<div style="float: left; margin-left: 10px;">
    <div style="clear: both; width: 200px; height: 200px; background: #FF8000; padding-top: 20px;">222</div>
    <div style="clear: both; width: 200px; height: 200px; background: #FF8000; margin-top: 10px;">333</div>
</div>
</BODY>
</HTML>

Данный код в IE отображается так:
user posted image

А вот в Опере и Мозилле вот так:
user posted image

Кто виноват ? И что делать ?

Большое спасибо.
С уважением, Сергей.

Автор: Violator 24.9.2009, 23:41

svch,
урл не указан в доктайпе

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

http://www.w3.org/QA/2002/04/valid-dtd-list.html

Автор: svch 25.9.2009, 07:09

Нет, не в этом дело. С этим доктайпом тоже не работает.
А потом, если поменять доктайп - у меня перестает работать другая фишка, из-за которой я собственно все и затеял. Так что его надо бы оставить, как есть.

Автор: blah 25.9.2009, 12:42

http://tinyurl.com/y953ema
Самый простой вариант, конечно, завернуть еще в один блок.

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Untitled</TITLE>
</HEAD>
<BODY>
<div style="float: left; width: 200px; height: 200px; background: #FF8000">111</div>
<div style="float: left; margin-left: 10px;">
    <div style="clear: both; width: 200px; height: 200px; background: #FF8000;"><div style="padding-top: 20px;">222</div></div>
    <div style="clear: both; width: 200px; height: 200px; background: #FF8000; margin-top: 10px;">333</div>
</div>
</BODY>
</HTML>

Цитата(svch @ 25.9.2009, 05:09

)

Так что его надо бы оставить, как есть.

Ну а вообще quirks mode не есть гуд. Все можно реализовать и с нормальным доктайпом.

Автор: svch 25.9.2009, 19:00

Заворачивать еще в один див, конечно, не есть гуд.
А с каким доктайпом это будет работать ?

Автор: Violator 25.9.2009, 23:37

svch,
с этим доктайпом все корректно отображается
учитывайте что высота 2-го блока в вашем примере будет 220px (height(200px) + padding-top(20px))