Xpoint
   [напомнить пароль]

Дочерний элемент выползает из родильского в IE

Метки: [без меток]
2007-07-15 14:43:18 [обр] Noita Kronk[досье]

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

Есть такой код CSS:

div.box {
   background-image: url(img/dark-paper.jpg);
   margin: 0 0 20px;
   padding: 0;
   border-top: 1px solid #755035;
   border-bottom: 1px solid #CD9C64;
   border-right: 1px solid #CD9C64;
}

div.box h5 {
   float: left;
   font: bold 14px Tahoma, sans-serif;
   color: #755035;
   margin: 0;
   padding: 2px 8px;
   background-color: #DCCAAA;
   border-left: 1px solid #755035;
}

div.box div.content {
   clear: both;
   margin: 0;
   padding: 12px 8px 4px;
   border-left: 1px solid #CD9C64;
}

и такой код HTML:

<div class="box">
<h5>Справочная информация</h5>
<div class="content">
content content content content
content content content content
content content content content
</div>
</div>

<div class="box">
<h5>Календарь и подписка</h5>
<div class="content">
content content content content
content content content content
content content content content
</div>
</div>

В Opera и FF всё отображается чудесно. IE же почему-то выдавливает дочерние h5 из родительского div.box. Если выравнивание влево, то выдавливает влево, если вправо, то вправо. Реализация того же с помощью вкладывания в h5 контейнера span, выровненного с помощью text-align даёт абсолютно такой же результат. Причём первый div.box выглядит корректно, сползание вбок начинается со второго и увеличивается с каждым новым.

Как сидит на месте в FF
Как выползает в IE

спустя 22 минуты [обр] Евгений Петров(76/1055)[досье]

Проверьте (после основного кода CSS)

<!--[if IE]>
<style type="text/css">
*html div.box h5{height:1%;}
</style>
<![endif]-->

P.S. Указывайте всегда версию IE.

Powered by POEM™ Engine Copyright © 2002-2005