| Re: Cada vez entiendo menos a IE (problemas varios)
Hola, mbavio.
Como sabrás, la propiedad overflow se utiliza para mostrar las barras de scroll cuando el contenido de una caja supera el tamaño de ésta. Pero también tiene otra curiosa utilidad cuando la caja carece de tamaño:
en firefox, cuando una caja no tiene tamaño de alto definido y tiene otras cajas dentro, ésta no crece cuando crecen las que están dentro de ella. Para conseguir que crezca según lo hagan las que tiene dentro, se suele usar el truco que has usado tú, es decir, poner al final de las cajas interiores un div vacío que sólo tiene la propiedad "clear: both", de manera que este div obliga a que la caja contenedora crezca hasta donde acaba él.
Pero otra cosa que se suele usar, y quizá más correcta, es asignar a la caja contenedora la propiedad "overflow: auto", lo que le obliga a crecer para albergar a las que tenga dentro de ella. Es importante recordar que si la caja tuviera un tamaño de alto definido y el contenido lo superara, la propiedad overflow le haría sacar las barras de scroll, pero si no tiene el alto definido, lo que le hace es crecer al ritmo que lo hagan las cajas que tenga dentro.
En tu caso concreto, lo que decía en mi primer mensaje, en el que al parecer no me expliqué bien, es lo siguiente:
tu tienes por cada anunciante una caja que se llama "anunciante". Dentro de ella tienes otra que se llama "caratula", que tiene un fondo y dentro de ella el nombre del anunciante (nombreAnunciante) y el lugar (lugarAnunciante), en sendas cajas.
Como todos estos elementos están flotados, al final pones el div vacío con el "clear: both" comentado, para que haya un corte y para que la caja "caratula" muestre su fondo, porque si no fuera así no lo mostraría. Pero esto te ha producido un error en explorer, y es que el div vacío obliga a crecer una línea de más a la caja "caratula" (un error exclusivo de IE).
Pues bien, la solución que te proponía era la siguiente:
1.- elimina los div vacíos para que no hagan crecer en explorer la caja "caratula". Entonces esa caja dejará de mostrar su fondo, porque no habrá crecido para albergar a las que lleva dentro, como te decía al principio.
2.- Elimina el "float: left" de la caja "caratula" porque no lo necesita; en realidad, ella ocupa todo el ancho disponible dentro de su caja contenedora "anunciante".
3.- Añádele a la caja "caratula" la propiedad "overflow: auto", para obligarle a que crezca tanto como las que tiene dentro, y así muestre su fondo oscuro.
4.- Dale a la caja "caratula" por si acaso el mismo ancho que a su caja contenedora "anunciante" (width: 470px;), para asegurarte de que ocupa todo el ancho disponible (de lado a lado de su contenedora).
Con esto, lo que consigues es que la caja "caratula" muestre su fondo oscuro, que ocupe todo el ancho disponible, que no necesite el "clear:both" porque no está flotada y que no tenga el error de explorer de ser más alta de lo que debe ser según su contenido (las cajas nombre y lugar del anunciante).
Como te digo, esta era la solución que te proponía para resolver el problema de explorer, además de que me parece más correcto en general, ya que como digo, creo que la caja "caratula" no necesita estar flotada para nada, ya que está dentro de "anunciante", y debe ocupar todo el ancho disponible.
Espero haberme explicado mejor esta vez. Si quieres o aun te resulta algo confuso, te paso la muestra de tu código ya modificado para que veas que efectivamente se resuelve el problema y todo queda como tú querías, es decir, como se mostraba desde el principio en firefox.
Mikel. |