Too Cool for Internet Explorer

Bug clear en Opera 7.5

Hora y Fecha: Marzo 26, 2005 @ 5:24 pm Autor: Moisés Maciá
Categorías:
315 views

Llevo toda la tarde dandole vueltas a un bug especialmente dificil del interprete de CSS de Opera 7.54. La cuestión es la siguiente: cuando flotamos un bloque a la izquierda con float:left y seguidamente aplicamos un clear:left al siguiente bloque aparece el bug, el primer bloque presenta un margen que destroza el diseño.

El código que reproduce el bug es el siguiente:

<div id="floated1">&nbsp;</div>
<div id="floated2">&nbsp;</div>

#floated1 {
	border: 1px solid red;
	width: 50px;
	height: 30px;
	float: left;
}

#floated2 {
	border: 1px solid blue;
	height: 30px;
	width: 50px;
	clear:left;
}

Y en opera apracece algo como esto:

Opera clear bug

La solución es bastante elegante ya que no introduce efectos laterales a los demas navegadores mediante hacks CSS, sólo hay que meter el bloque rebelde dentro de otro bloque sin aplicarle ninguna clase de esta manera:

<div><div id="floated1">&nbsp;</div></div>
<div id="floated2">&nbsp;</div>

Y todo vuelve a estar como debería verse:

Opera corrected

Creo que la gente que se pelea todos los días con CSS y problemas de este tipo está infravalorada, maquetar con CSS es un arte!





« Anterior post: Cables! | Próximo post: Nanaca Crash »

3 Comentarios para “Bug clear en Opera 7.5”

Javuto
27 de Marzo de 2005 a las 12:47 pm    

Ciertamente interesante ;)
Un saludo

Federico
30 de Marzo de 2005 a las 5:52 am    

Opera 7.54 no me produce ningún problema. Copié exactamente lo que pusiste antes.

Moises
30 de Marzo de 2005 a las 7:03 pm    

Pues tienes razón, no lo entiendo las imagenes son una captura del navegador …

De hecho tu pagina me ayudó a dar con la solución. La próxima vez pondre enlaces a los ejemplos.


Bad Behavior has blocked 353 access attempts in the last 7 days.