VPF::IE clip'ает внутренний слой при отрицательном

Royan

Дата 21.10.2008, 01:58 (ссылка)

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

Загрузка ...

Dreamer

Профиль
Группа: Участник Клуба
Сообщений: 1708
Регистрация: 14.9.2002
Где: Лондон

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

Не могу взять в толк что происходит в IE:

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Пример</title>
    <STYLE type="text/css">
    BODY {
    margin: 25px;
    padding: 25px;
    }
    
    #page {
        width: 100%;
        height: 600;
        background-color: #CCCCCC; /* Только IE рисует серый фон, почему остальные не рисуют? */
    }
    
    #logo {
        display: block;
        background-color: olive;
        width: 200px;
        height: 50px;
        margin-left:-50px; /* Сдвигаю влево, в IE не работает */
        float: left;
    }
    
    </STYLE>
    </head>
    <body>
        <DIV id="page">
            <SPAN id="logo"></SPAN>
        </DIV>
    </body>
</html>

Слой #logo во всех браузерах кроме IE нормально сдвигается влево, в IE он почему-то клипается оборачивающем его слоем #page

И еще почему все браузеры кроме IE не рисуют серый (#CCCCCC) фон слоя #page?

--------------------

Открыта вакансия Junior Java Developer'а в нашем лондонском офисе, подробнее можно узнать здесь

SelenIT

Дата 21.10.2008, 02:34 (ссылка)

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

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

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

Цитата(Royan @ 21.10.2008, 01:58

)

Только IE рисует серый фон, почему остальные не рисуют?

Только IE понимает независимо от режима "height:600" (без указания размерности "px"). Для других это все равно, что height:auto - а, поскольку единственным содержимым блока является плавающий блок (который по стандарту "вываливается" из контейнера, не влияя на его высоту), то итоговая высота оказывается нулевой - красить просто нечего.

Насчет поведения в IE затрудняюсь сказать сходу, но ясно, что это какие-то баги. Может помочь position: relative для лого (тогда, по идее, можно и от float-а избавиться). Еще у IE6 есть пренепреятная черта - он удваивает margin-ы у крайних в ряду плавающих элементов, лечится это установкой для них display: inline (котороый все равно больше ни на что не влияет, потому что любой float - уже блок по определению)...

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

Royan

Дата 22.10.2008, 01:24 (ссылка)

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

Загрузка ...

Dreamer

Профиль
Группа: Участник Клуба
Сообщений: 1708
Регистрация: 14.9.2002
Где: Лондон

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

SelenIT, Все догадки правильные! Спасибо огромное!

--------------------

Открыта вакансия Junior Java Developer'а в нашем лондонском офисе, подробнее можно узнать здесь

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