Добрый день, уважаемые хаброжители :)
Сегодня столкнулась с очередным закидоном самого любимого браузера всех верстальщиков. Дело вот в чем:
мне нужно сделать на списках определенную конструкцию.
Выглядеть она должна так:
(и в нормальных браузерах так и выглядит).
А вот в IE она выглядит так:
Пятый блок, у которого стоит clear both, эксплорером почему-то игнорируется как очищающий… И те блоки, что ниже — подскакивают на верх…
Вроде бы версткой давно занимаюсь, а с таким первый раз сталкиваюсь. Очередной болезненный щелчок по носу :(
Возможно кто-нибудь сталкивался с такой ерундой? Возможно это вообще на li сделать, или можно не париться и делать на дивах?
Вот код:
UPD
Правильное решение подсказали в первом же ответе — вот что значит глаз не замылен :) для пятого дива всего-то нужно было назначить float:none;
Сегодня столкнулась с очередным закидоном самого любимого браузера всех верстальщиков. Дело вот в чем:
мне нужно сделать на списках определенную конструкцию.
Выглядеть она должна так:
(и в нормальных браузерах так и выглядит).
А вот в IE она выглядит так:
Пятый блок, у которого стоит clear both, эксплорером почему-то игнорируется как очищающий… И те блоки, что ниже — подскакивают на верх…
Вроде бы версткой давно занимаюсь, а с таким первый раз сталкиваюсь. Очередной болезненный щелчок по носу :(
Возможно кто-нибудь сталкивался с такой ерундой? Возможно это вообще на li сделать, или можно не париться и делать на дивах?
Вот код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<body>
<style>
.ul1 {
padding:0px;
margin:0px;
list-style-type:none;
width:410px;
}
.ul1 li {
float:left;
width:100px;
border:1px solid red;
height:100px;
}
</style>
<ul class="ul1">
<li>1</li>
<li style="height:150px;">2</li>
<li>3</li>
<li>4</li>
<li style="clear:both; width:410px;">5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</body>
</html>
UPD
Правильное решение подсказали в первом же ответе — вот что значит глаз не замылен :) для пятого дива всего-то нужно было назначить float:none;