Добрый день, уважаемые хаброжители :)

Сегодня столкнулась с очередным закидоном самого любимого браузера всех верстальщиков. Дело вот в чем:
мне нужно сделать на списках определенную конструкцию.



Выглядеть она должна так:

image

(и в нормальных браузерах так и выглядит).

А вот в IE она выглядит так:

image

Пятый блок, у которого стоит 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;