Cada vez entiendo menos a IE (problemas varios)

[mbavio]

Hola buenos dias para todos los foreros de ForosDelWeb.
Necesito hacerles una consulta. Si pueden observar en la siguiente página, http://www.guiaimpresion.com.ar/ap_equipos_ap.php, verán una lista de anunciantes. Si estan utilizando Firefox, verán mis estilos normales, he quitado muchos márgenes para enfatizar lo que quiero mostrar. Si lo ven ahora con Explorer, en la lista de anunciantes, verán que en los rótulos con fondo gris oscuro se crea un extraño margen inferior, que no tengo idea de donde sale. Aclaro, tengo un div clase "clear" para que se vean los elementos flotados, pero le he puesto height:0, margin:0 y padding:0 para que no moleste. Alguien tiene idea por que pasa esto???
Además, si observan la imagen "Espacio Publicitario", verán que en Firefox, al flotarla a la derecha, se pone correctamente a la altura del primer párrafo. En IE, se corre hacia arriba hasta tocar su capa contenedora. De nuevo, por que???

Por ultimo, y espero que alguno llegue hasta esta parte de mi mensaje, si se fijan en http://www.guiaimpresion.com.ar/ap_equipos.php verán una lista de rubros. En Firefox, se muestra (como casi siempre) perfecto. Pero en IE se quiebra, mostrandome la lista de cualquier forma, y llevando la barra izquierda para abajo, como si me hubiese olvidado de cerrar algo, cosa que no he hecho... juro que es la ultima vez que lo pregunto, pero, POR QUE???

Muchas gracias a todos los que puedan ayudarme. Saludos.

[Shade]

Sorry... pero veo bien tanto en Firefox como en IE6 como en IE7 (veo todo igual!!) Si pudieras postearte unas imagenes intento ayudarte.

[mbavio]

Hola Shade aca te dejo un ejemplo para que puedas verlo...



Saludos, y gracias.

[Shade]

ok, ya veo donde esta el error, es algo que me ha pasado a veces y es que ie6 "duplica" el valor de los margins en algunos lugares...

Trata cambiando el css, si por ejemplo lo tienes como margin:8px 10px 8px 0px; cambialo a margin-top:8px; margin-left:10px; margin-bottom:8px; margin-right:0px;

[mbavio]

Amigo Shade, en el css subido directamente he eliminado todo rastro de margenes, para que no queden dudas. La verdad, no entiendo que pasa... y con la imagen tienes idea por que pasa eso? Gracias por tu ayuda.

[Mikmoro]

Efectivamente el problema viene por los div clear. Si los eliminas todos y añades a tu clase "carátula" el mismo tamaño que a su contenedor para que tenga un cuerpo y un overflow: auto para que se dimensione con su contenido, creo que resuelves el problema:

#cuerpo .caja .norotulo .anunciante .caratula{
width: 470px;
background-color: #333;
overflow: auto;
}

Lo del gráfico es porque tu clase "descripcionAnunciante" necesita un margen para no pegarse a la parte superior. Pon esto a ver y prueba por ahí, porque exactamente igual en IE y en FF creo que no va a quedar nunca:

#cuerpo .caja .norotulo .anunciante .descripcionAnunciante{
margin-top: 10px;
}

Ya nos contarás.

Mikel.

[mbavio]

No entendi tu ayuda, tengo flotada la clase caratula, o sea que en algun lado tengo que aplicar "clear", sino pierdo el fondo. Ahora lo que he hecho es flotar TODO, hasta el div mayor, ".anunciante". Luego, a este div tambien le he aplicado "clear", y se ha solucionado el problema!
Gracias a los que trataron de ayudarme, espero que mi caso le sirva a alguien. Saludos.

[Mikmoro]

Iniciado por mbavio

No entendi tu ayuda, tengo flotada la clase caratula, o sea que en algun lado tengo que aplicar "clear", sino pierdo el fondo.

Pues exactamente por eso te decía que le pusieras overflow: auto;, para que no se pierda su fondo, que se pierde sólo porque no se redimensiona con su contenido.

Si ya lo has resuelto de otra manera ya no tiene importancia.

Mikel.

[mbavio]

Mikel, he probado aplicandole overflow: auto y no funciona. Me podrias explicar mejor como funciona esta propiedad, ya que no es de mi conocimiento? Muchas gracias. Saludos.

[Mikmoro]

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.

[mbavio]

Mikmoro, perdon por mi eterna demora en contestar. He tenido una semana digna de ser una estreno de terror en Hollywood, y no tenido tiempo ni de entrar al foro.

He probado tu solucion, y funciona de maravillas! La verdad es que no sabía esta propiedad, al fin voy a dejar de poner divs vacios para hacer "clear".

Te cuento por si las dudas que hay otra solucion, la lei en el libro "CSS Mastery", de Andy Budd, por lo que debe ser útil tambien.

La solucion consiste en flotar para arriba, con esto me refiero a flotar primero a #caratula, luego a su contenedor, #anunciante, para que lo muestre, y asi, hasta tener algun elemento que aplique el "clear". En este caso yo tengo un boton de VOLVER abajo, por lo que puedo aplicarle el clear ahi a todas las cajas flotadas. Quiza una solución mas complicada y rebuscada (creo que sirve mas para armar layouts) pero no deja de ser útil quizás.

De nuevo, agradezco tu ayuda, he implementado tu solucion a mi problema, por lo tanto saldrás en los créditos!

Gracias, y hasta la próxima.