[Ovillo] Imagenes con height:auto en IE6 no muestran su altura real

[Juan Luis Blanco]

Hola de nuevo,

después de mucho tiempo leyendoos a diario he descubierto que desde la
cuenta de correo que uso habitualmente no podía contactar con la lista, sin
embargo desde g-mail si. No se la razón o si a alguien le habrá pasado pero
el caso es que por fin lo he conseguido.

Es probable que la consulta que os hago le suene familiar a alguien, pues
implica a nuestro querido IE6.
El caso es que quiero mostrar una caja con productos (libros, CDs) que
tienen diferentes formatos. Todos ellos se presentan con la imagen de
portada y el título a su derecha. La caja muestra un total de cinco
productos en horizontal (para lo cual los elementos estan flotados a la
izquierda). Para poder controlar un poco la maquetación he optado por
definir un ancho fijo para las imagenes (cuyos originales pueden ser de
cualquier tamaño), y declarar un height:auto, para que la imagen se muestre
en sus proporciones reales.

La cosa pinta bien hasta que lo abres en IE6, donde las imágenes de los
productos no aparecen en sus proporciones reales, sino comprimidas en
vertical. Lo sorprendente (bueno, no tanto, ya sabemos que IE convierte la
sorpresa en rutina...;-) es que al pasar el puntero por encima de las
imágenes, estas se redimensionan y adquieren sus proporciones reales.

Os dejo el código implicado:

XHTML
            <div id="arg">
                <h2>Azken argitalpenak</h2>
                <dl>
                    <dt><a href="xxx.html"><img
src="irudiak/produktuak/Elh_hiztegia_3ed.jpg" alt="xxx" /></a></dt>
                    <dd><a href="xxx.html">Nombre del producto nombre del
producto</a></dd>
                </dl>
                <dl>
                    <dt><a href="xxx.html"><img
src="irudiak/produktuak/eusk-fran-portada.jpg" alt="xxx" /></a></dt>
                    <dd><a href="xxx.html">Nombre del producto nombre del
producto</a></dd>
                </dl>
                <dl>
                    <dt><a href="xxx.html"><img
src="irudiak/produktuak/ikaslearen-hiztegia_portada.jpg" alt="xxx"
/></a></dt>
                    <dd><a href="xxx.html">Nombre del producto nombre del
producto</a></dd>
                </dl>
                <dl>
                    <dt><a href="xxx.html"><img
src="irudiak/produktuak/cluster_hizteg.jpg" alt="xxx" /></a></dt>
                    <dd><a href="xxx.html">Nombre del producto nombre del
producto</a></dd>
                </dl>
                <dl id="aldizkaria">
                    <dt><a href="xxx.html"><img
src="irudiak/produktuak/ELH_azalh249.jpg" alt="xxx" /></a></dt>
                    <dd><a href="xxx.html">Nombre del producto nombre del
producto</a></dd>
                </dl>
          </div>


CSS
.org div#arg dl {
    float:left;
    padding-top:10px;
    width:13.6em; height:7.5em;
    }
.org div#arg dt {
    float:left;
    margin-right:5px;
    }
.org div#arg dt img {
    width:38px; height:auto;
    border:1px solid #666666;
    }
.org div#arg dd {
    float:left;
    width:7.9em;
    padding-top:0;
    }
.org div#arg dd a {
    font:bold 1em Arial, Helvetica, sans-serif;
    color:#4e4e4e;
    text-decoration:none;
    }
.org div#arg dd a:hover {
    color:#a17102;
    text-decoration:underline;
    }
.org div#arg dl#aldizkaria {width:10.5em;}
.org div#arg dl#aldizkaria dd {width:6em;}
.org div#arg dl#aldizkaria dd span {
    display:block;
    font-weight:normal;
    color:#a17102;
    }

Gracias de antemano,
Juanlu