[Ovillo] Listados de elementos que se superponen

[jEsuSdA 8)]

Hola!:

Estoy tratando de organizar varios items con una lista.
Cada item contiene una imagen y un texto enlazado.

El problema está en que, cuando el texto enlazado no supera en altura el 
tamaño de la imagen (lo cual suele ocurrir si el texto es corto o la 
resolución alta) las listas se superponen formado una especie de escalera.

La manera que primeramente se me ocurrió para solventar el problema era 
poner un tamaño de altura mínim: "min-height:6em" , pero como sabéis, 
iexploter NO soporta min-height, así que la solución es usar height.

Esto provoca que si el texto es extenso o la resolución baja, entonces 
los textos se superpongan a los del item inferior, no se vean o 
aparezcan barras de scroll, dependiendo de si uso "overflow:auto, hidden 
o scroll".

La pregunta es: ¿existe alguna manera de maquetar estas listas para que 
se vean bien en todos los navegadores y resoluciones con independencia 
del tamaño del texto enlazado e incluso de la existencia o no de imagen 
asociada al item?

Lo que busco es algo así como cuando maquetábamos con tablas y creábamos 
una tabla con 2 columnas y varias filas; en la primera celda de cada 
fila iría una imagen y en la segunda un texto enlazado. La tabla se 
estiraba ajustándose en cada fila a la celda más alta.


Gracias!

------


El HTML:


<ul>
                    <li>
                        <img src="pics/lorem ipsum_00.jpg" alt="#" 
title="#" />
                        <a href="#" title="#">Lorem ipsum.</a>
                    </li>
       
                    <li>
                        <img src="pics/lorem ipsum_00.jpg" alt="#" 
title="#" />
                        <a href="#" title="#">Lorem ipsum.</a>
                    </li>

                    <li>
                        <img src="pics/lorem ipsum_00.jpg" alt="#" 
title="#" />
                        <a href="#" title="#">Lorem ipsum .</a>
                    </li>

</ul>



El CSS:

li
{
    list-style:none;
    overflow:auto;
    display:block;
    height:6em;
}

noticias li img
{
    float:left;
    margin:0 1em 1em 0;
}


Pdta: no puedo usar "clear:right" puesto que existe una capa a la 
derecha que no debe moverse (la típica maquetación a 3columnas donde el 
listado de items está en la columna del centro).