VPF::Почему сползает блок ? - Форум программистов

svch

Дата 24.9.2009, 22:44 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 116
Регистрация: 10.4.2006

Репутация: нет
Всего: нет

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

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

Код


<!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 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 234
Регистрация: 10.1.2009

Репутация: 15
Всего: 15

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 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 116
Регистрация: 10.4.2006

Репутация: нет
Всего: нет

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

blah

Дата 25.9.2009, 12:42 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 205
Регистрация: 25.9.2008
Где: моя тачка, чувак?

Репутация: 15
Всего: 17

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

Код


<!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 не есть гуд. Все можно реализовать и с нормальным доктайпом.

Это сообщение отредактировал(а) blah - 25.9.2009, 12:44

svch

Дата 25.9.2009, 19:00 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 116
Регистрация: 10.4.2006

Репутация: нет
Всего: нет

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

Violator

Дата 25.9.2009, 23:37 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 234
Регистрация: 10.1.2009

Репутация: 15
Всего: 15

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

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »