Float loco en firefox !

enridp · #1 (**permalink**) 08/04/2011, 19:26

Hola a todos !
Me estoy volviendo loco tratando de ver donde esta el error.
tengo una pagina que anda bien tanto en Chrome como en IE 7 y 8, pero no en firefox !
Lo mas raro es que con el firebug si apago algunos CSS y los vuelvo a encender (o sea que en definitiva no cambio nada) se arregla todo !!

Es muy extraño, en principio me parece que hasta podría ser un error de Firefox.
Pero creo que tambien puede estar relacionado con esto:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TITULO</title>

	

   
    
    <style>
	html, body {  
     	height:100%;  
    	 margin:0;  
	} 
	
	body {
		background-color: #e9e9e9; 
		position:relative;  
		min-width:960px;  
		min-height:300px;
	}
	</style>
    
</head>



<body>


<div style="height:40px;">
	<div style="float:left;"><h1>ALGO</h1>
    </div>
</div>
<div style="position:relative; top:50%; margin-top:-150px;">
<div>
<ul>	
	<li style="float:left">
    <div style="width:190px; height:211px;background:#CCC;">guia visual</div>  
	</li>
</ul>
</div>
</div>



</body>
</html>

En el codigo de arriba trate de dejar lo mas limpio todo para que solo se vea el problema:

(en el post se ve algo chica, aca esta a tamaño completo: http://www.imagengratis.org/images/capturacssloc.jpg )

En la captura de arriba es lo que muestra el HTML, como se puede ver ahi lo que necesito es que el cuadro gris este justo donde termina la zona amarilla (zona pintada por firebug).
Pero no esta ahi, y es culpa de los dos "float:left"
Probe poner divs con clear pero no se arregla.

Alguien sabe como solucionarlo?

Gracias !!

enridp · #2 (**permalink**) 08/04/2011, 20:12

Encontré una solución, agregar

Código CSS:

Ver originaloverflow: hidden;

al primer div, asi queda:

Código HTML:

Ver original<div style="height:40px; overflow:hidden;">
    <div style="float:left;"><h1>ALGO</h1>
    </div>
</div>

Es ya sabido que el overflow hidden corta los floats pero no me queda del todo claro porque se ve como se ve sin el overflow...
ademas que con clear no lo pude arreglar no se por que.

Si alguien entiende mejor que está pasando me sería de mucha ayuda y seguro a alguien más también le va a servir.

Saludos !

saul123 · #3 (**permalink**) 09/04/2011, 02:54

Hola

Hice una prueba y en primera en todos los exploradores el cuadro gris me aparecia en la misma posicion y en este div creo que es el problema

<div style="position:relative; top:50%; margin-top:-150px;">

la position relativ hace que maje aun mas ya que le estas poniendo un top de 50% y no entiendo por que despues le das un margin-top:-150px, quiza ahi puedes encontrar la solucion

enridp · #4 (**permalink**) 09/04/2011, 07:45

Hola @saul, si el codigo que puse se ve igual en todos los navegadores. Mi codigo original es el que se ve mal en firefox unicamente, pero decidi limpiarlo porque me parecio demasiado extenso para ponerlo (ademas que tiene bastante interaccion JS).

El codigo resumido que puse me parece que es el problemático (que por alguna razon los otros navegadores "arreglan" en mi codigo original).

Comento mejor de donde viene esee div:
La idea es centrar verticalmente un menu. Al principio lo hice con el clasico position:absolute. Pero decidi cambiarlo a un esquema donde todo sea relative.
(así podría agregar cajas de mensajes arriba de todo y toda la web simplemente se desplazaria hacia abajo)

de ahi que ese div tenga un top:50% y un margin-top: negativo para compensar su alto y tambien el alto de los elementos de arriba (ya que es relative no absolute).

El problema es que ahora al ser relative se ve afectado por los float que hay antes (y el propio float que tiene adentro el div centrado). Y la unica forma de romper eso fue agregando un overflow: hidden al div anterior.

Lo bueno es que ya funciona, lo malo es que no entiendo muy bien por que :P