Problemas con explorer

Sea una lista desordenada con cuatro elementos, clasificados por clase en pares e impares (los elementos en posición impar tienen class="odd". Sean las siguientes reglas de estilo:

ul {
  width: 400px;
  background: red;
}

li {
  list-style: none;
  background: lightgreen;
  width: 180px;
  padding: 10px;
  margin: 0 0 10px;
  float: right;
}

li.odd {
  background: lightblue;
  float: left;
  clear: both;
}

Opera y Firefox muestran la rejilla correctamente (figura 1), Explorer no hace el «clear» correctamente (figura 2).

Actualización

Gracias a la colaboración de Ramón Pravia he dado con una solución no del todo mala. Empleando un par de hacks ligeritos, la cosa se ve tal y como se deseaba.

Este es el nuevo código:

ul {
  width: 400px;
  background: red;
}

li {
  list-style: none;
  background: lightgreen;
  width: 180px;
  padding: 10px;
  margin: 0 0 10px 0;
  float: right;
  _float: none; /* IE */
}

li.odd {
  background: lightblue;
  float: left;
  clear: both;
  _margin: 0 -3px 10px 0; /* IE */
}

Presentación en vivo (así se ve en tu navegador)

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris lacinia dapibus velit. Vestibulum aliquam accumsan lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque a augue. Nunc egestas risus vel turpis. Nunc arcu neque, pharetra ut, tempor in, suscipit volutpat, leo.
• Phasellus molestie neque eu enim. Donec convallis. Vestibulum mi. Proin ut dui. Fusce eleifend, nunc eu bibendum ultrices, quam lacus accumsan lectus, eu accumsan nulla libero quis diam. Suspendisse scelerisque scelerisque metus. Fusce justo.
• Aenean pharetra quam at purus. In erat orci, vestibulum ac, dignissim id, congue vel, metus. Donec lacus urna, ullamcorper eu, condimentum vel, posuere a, metus. Pellentesque venenatis metus a elit dignissim tristique.
• Sed et risus at dui fermentum consequat. Nam ac justo. Nam nec turpis at orci posuere hendrerit. Etiam viverra nunc eget dolor.

Las siguientes figuras corresponden a la presentación incorrecta que se obtenía en Explorer con el CSS original.

Figura 1: vista en Firefox

Figura 2: vista en Explorer

Creado el 4 de agosto de 2006