¿Bug css en firefox y opera? propiedad clear

[tunait]

Aquí de nuevo peleándola...

He buscado info sobre bugs css en firefox pero sólo encontré bugs de seguridad.

A ver si alguien sabe algo al respecto y cuál podría ser la solución.

Exposición:

menú a la izquierda con posicionamiento relativo (sin posicionamiento ocurre lo mismo)

contenedor central que contiene título y contenidos

contenedor de contenidos que carga listado de noticias, cada item del listado incluye:

- titulo noticia
- fecha noticia
- imagen con un float: left
- primeros x caracteres del texto de la noticia
- link a noticia completa

Si la altura de la imagen es mayor que el texto que flota a su lado la imagen se sobrepone a la siguiente noticia. Solución: aplicarle un clear (left/both) al siguiente contenedor (donde se incluye el link a la noticia completa)

Perfecto para Explorer y Mozilla pero tanto Firefox como Opera disparan la altura del cuadro

Vista con explorer y mozilla


Vista con firefox y opera


http://www.tunait.com/pruebas/bug/bugfirefox.htm

Lo curioso es que esto sólo afecta a la primera noticia, pero no al resto.
Si la misma noticia pasa a ser la segunda entonces se ve bien y afecta a la primera


http://www.tunait.com/pruebas/bug/bugfirefox2.htm

...y ocurre lo mismo si se agregan más noticias.
http://www.tunait.com/pruebas/bug/bugfirefox3.htm

Pero hay una forma en la que entonces el problema se arregla y es posicionando el contenedor del menú en forma absoluta (o quitando el contenedor del menú)
http://www.tunait.com/pruebas/bug/bugfirefox4.htm

La cuestión es que el menú no puede usar posicionamiento absoluto pues es contráctil y al abrir alguna opción debe empujar hacia abajo al contenedor inferior (pie) y posicionado en forma absoluta no lo hace y le pasa por debajo.

Dejo aquí el reporte, si alguien me puede confirmar que es un bug o si es culpa mía y si saben alguna forma de solucionarlo.

De momento he quitado el clear y quien agregue la noticia que se encargue de controlar que la imagen no sea demasiado alta. Tras pelear varias horas tiré la toalla y lo dí por imposible.

Saludos

[kemie]

tunait, tu problema es que el clear que estas aplicando al link de "leer mas" esta desplazandolo debajo del menu (porque este esta flotando a la izquierda). Para que el clear solo afecte a los elementos dentro de la nota, utiliza esto:
.textonot{
border: 1px solid red;
position: relative;
overflow:auto;

}

no he probado en opera, pero en firefox soluciona el problema.

[tunait]

Ostras, pues no me había fijado que la altura del cuadro coincidía con la altura del menú

Pues tienes razón, Kemie (as ever ) agregando el overflow: auto se corrige en Firefox.

Me queda la curiosidad ¿es un bug de estos navegadores o deben comportarse así? me despista que mozilla no lo hace. De hecho el overflow lo soluciona pero no entiendo por qué ....

como añadido comentar que si bien sí se soluciona en firefox en Opera no lo hace

yá pedir un truco para opera será demasiado ¿no? que hago, que bomben al opera y lo ignoro ¿no?

Una vez más me salvas la papeleta, kemie, muchísimas gracias héroa

[kemie]

tunait,si mal no recuerdo en realidad firefox lo esta haciendo como deberia, lo de mozilla es un error que tenia desde hace tiempo. no estoy 100% segura de esto. Otra opcion que podrias intentar que deberia funcionar en todos los navegadores, es flotar tu capa de contenido, de esa manera tus clear no afectan a otros divs.

[tunait]

Hum... me lo había planteado, probaré a ver si no me descojona otras cosas, yá te contaré


Vovliendo a este comportamiento de limpiar cualquier flotante anterior... pues no me parece lógico. Creo que debería limpiar el float precedente nada más.