Foros del Web » Creando para Internet » CSS »

Problemas con float en firefox

Estas en el tema de Problemas con float en firefox en el foro de CSS en Foros del Web. Estoy realizando una nueva versión de mi web. Tiene 2 columnas, utilizan la propiedad float. He podido comprobar que en algunos navegadores firefox, la columna ...
  #1 (permalink)  
Antiguo 27/10/2006, 04:22
 
Fecha de Ingreso: octubre-2006
Ubicación: Murcia - España
Mensajes: 336
Antigüedad: 11 años, 1 mes
Puntos: 6
Problemas con float en firefox

Estoy realizando una nueva versión de mi web.

Tiene 2 columnas, utilizan la propiedad float.

He podido comprobar que en algunos navegadores firefox, la columna de la izquiera (contenido), a veces se desplaza hacia abajo, sin embargo, cuando refrescas, vuelve a subir.

He pensado que puede ser un bug de firefox.

Copio y pego el código (he tenido que quitar algunas url porque no me deja subirla por tener menos de 30 mensajes).

Cita:
<html lang="es"><!-- InstanceBegin template="/Templates/general02.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Description" content="Tienda de productos Herbalife para mantenerte sano y en forma" >
<meta name="Keywords" content="Nutrición, Herbalife, productos, sanos, cuerpo, deporte, físico, atletas, dieta, comida, sana, nutrirse, tienda, online" >
<meta name="Robots" content="all" >
<title>Nutriéndose</title>
<link href="/prueba2/css/generico.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="/favicon.ico">
</head>

<body>
<div id="cabecera">
<div id="cabizq">&nbsp;</div>

<div id="cabdrc">&nbsp;</div>
<div id="titulo">
<div style="width:95%; margin:auto; padding-top:10px;">
<h1>Nutriéndose.com</h1>
Un estilo de vida saludable
</div>
</div>
<div id="login">


<br/>

<form action="perfil.php" method="post" name="acceder">
<label for="user">Usuario:</label><br/>
<input type="text" name="usuario" value="user" id="user" maxlength="10"><br/>
<label for="pass">Contraseña:</label><br/>
<input type="password" name="password" value="pass" id="pass" maxlength="10"><br/><br/>
<input type="submit" name="enviar" value="Entrar">
</form>


</div>

</div>
<div id="bloque">
<div id="menulatdrc">
<h2>Menú Principal</h2>
<ul class="navi">
<li><a href="index.php">Inicio</a></li>
<li><a href="quienes.php">Quienes sómos</a></li>
<li><a href="comocomprar.php">Como comprar</a></li>


<li><a href="crearcuenta.php">Registro</a></li>

<li><a href="contacto.php">Contactar</a></li>
</ul>
<h2>Productos</h2>
<ul class="navi">
<li><a href="productos.php?cat=4">Control de peso</a></li>
<li><a href="productos.php?cat=1">Nutrición</a></li>

<li><a href="productos.php?cat=3">Nutrición para deportistas</a></li>
<li><a href="productos.php?cat=2">Cuidado de la piel</a></li>
<li><a href="productos.php?cat=5">Cuidado del cabello</a></li>
<li><a href="productos.php?cat=6">Fragancias</a></li>
</ul>
<h2>Más Información</h2>

<ul class="navi">
<li><a href="noticias.php">Noticias</a></li>
<li><a href="documentos.php">Artículos</a></li>
<li><a href="enlaces.php">Enlaces de interés</a></li>
<li><a href="calendario.php">Calendario</a></li>
<li><a href="faq.php">Preguntas y respuestas</a></li>

</ul>
<br/>


</div>
<div id="contenido">

<!-- InstanceBeginEditable name="contenido" -->
<div id="seccion"><h2>Productos</h2></div>
<br>

<!-- InstanceEndEditable -->
</div>
</div>
<div id="pie">Copyright © 2006 Nutriendose.com</div>
</body>
<!-- InstanceEnd --></html>
Cita:
/* CSS Document */



body {

margin:0px;

margin-top:5px;

font: 11px arial;

color:#666;

background:#426E48;

}



h1 { padding:0; margin:0; color: #FFF; background: inherit;font: bold 34px Arial; letter-spacing: -1px; }

h2 { background-color: inherit; color:#FF8D00; font-size:15px; font-weight:bold; margin: 0px 0 10px 0; padding:0; }

h2 a { color: #FF8D00; }

h2 a:hover { color: #EE8300; text-decoration: none;}

h3 { background-color: inherit; color:#666; font-size:11px; font-weight:bold; }

h3 a { color: #666; text-decoration:none; }

h3 a:hover { color: #666; text-decoration: none;}

input, select { border:1px solid #ccc; font: 11px arial; color:#666; }

hr { border:0px; border-top:1px dashed #ccc;}

a { color: #666; text-decoration:none; }

a:hover { text-decoration:underline; }

fieldset { border:1px solid #ccc; padding:5px; }

img { border:0px; }

iframe { width:100%; height:750px; border:0px; }

form { padding:0px; margin:0px; }



/* capas */



#cabecera {

width:760px;

margin:auto;

background:#2EAC50;

}



#cabizq {

width:580px;

height:20px;

background:#1C7935;

float:left;

}



#cabdrc {

width:180px;

height:20px;

background:#2EAC50;

float:right;

}



#titulo {

background:#2EAC50 url(../img/header.jpg);

width:580px;

height:120px;

float:left;

font-size: 16px;

color:#fff;

}



#login {

width:160px;

height:120px;

padding-left:10px;

padding-right:10px;

float:right;

background:#B3E6BB;

}



#bloque {

width:760px;

margin:auto;

background: #fff url(../img/fondo.gif);

clear:both;

display:table;

}



#menulatdrc {

float:right;

width:160px;

margin-top:10px;

padding-left:15px;

padding-right:5px;

}



.navi {

list-style:none;

margin-left:0px;

margin-right:0px;

margin-top:0px;

margin-bottom:15px;

padding:0px;

}



.navi li {

margin:0px;

padding:2px;

border-bottom:1px dashed #ccc;

}



.navi li:hover {

background:#C6EFC8;

}



.navi a {

color:#003366;

text-decoration:none;

}



.navi a:hover { text-decoration:none; }





#contenido {

float:left;

width:560px;

padding:10px;

text-align:justify;

}



#seccion { border-bottom:1px dashed #ccc;}



.not { width:100%; padding-bottom:10px; border-bottom:1px solid #ccc; }



#noticias {float:left; width:49%; padding-bottom:10px; padding-top:20px;}

#noticias ul { list-style-image:url(../img/arrow.gif); margin:0px; padding:0px; }

#noticias li { margin:0px; padding:0px; margin-left:17px;}



#articulos {float:right; width:49%; padding-bottom:10px; padding-top:20px;}

#articulos ul { list-style-image:url(../img/arrow.gif); margin:0px; padding:0px; }

#articulos li { margin:0px; padding:0px; margin-left:17px;}



#pie {

width:760px;

height:20px;

margin:auto;

clear:both;

background:#2EAC50;

text-align:center;

color:#fff;

}



/* Otros */



.colum1 {

width:49%;

float:left;

height:192px;

border-bottom:1px solid #ccc;

padding-top:5px;

}



.colum2 {

width:49%;

float:right;

margin-top:-14px;

height:192px;

border-bottom:1px solid #ccc;

padding-top:5px;

}



.boton, .boton:hover {

border:1px solid #ccc;

background:#f7f7f7;

padding-left:3px;

padding-right:3px;

text-decoration:none;

}
  #2 (permalink)  
Antiguo 27/10/2006, 06:17
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.021
Antigüedad: 13 años, 6 meses
Puntos: 832
Pues yo lo veo bien aunque refresque varias veces. Algo que me llamó la atención fue el exceso de "float" en los estilos.
  #3 (permalink)  
Antiguo 27/10/2006, 08:44
 
Fecha de Ingreso: octubre-2006
Ubicación: Murcia - España
Mensajes: 336
Antigüedad: 11 años, 1 mes
Puntos: 6
A ver si me deja enseñaros la web. nutriendose.com/prueba2
  #4 (permalink)  
Antiguo 28/10/2006, 10:32
 
Fecha de Ingreso: octubre-2006
Ubicación: Murcia - España
Mensajes: 336
Antigüedad: 11 años, 1 mes
Puntos: 6
Alguna opinión mas? puede que esté en lo cierto pensando que es un bug?.
  #5 (permalink)  
Antiguo 01/11/2006, 07:48
 
Fecha de Ingreso: octubre-2006
Ubicación: Murcia - España
Mensajes: 336
Antigüedad: 11 años, 1 mes
Puntos: 6
Ya he localizado el problema. Os lo comentó por si en un futuro algun le pasa lo mismo.

Despues de muchas pruebas con las siguientes configuraciones y en distintos ordenadores he conseguido localizarlo. Estas son dichas configuraciones.

- Windows XP, firefox 1.5
- Windows XP, firefox 2.0
- Windows XP, IE 6
- Windows XP, IE 7

- Suse Linux 10.2 beta, konqueror
- Suse Linux 10.2 beta, firefox 2.0
- Suse Linux 10.1, firefox 1.5

Algunos estaban conectado mediante cable de red y otros a traves de la wireless.

Tanto en konqueror como en IE se veían correctamente. En las versiones de firefox, de vez en cuando la capa del contenido de la derecha se desplazaba hacia abajo.

Observe que este problema se daba sobre todo en las conexiones wireless. Si recargaba la página con F5, acaba viendose correctamente.

En los ordenadores conectados por cable, comprobé que existía bastante tráfico.

Conclusion: Creo que es debido al tiempo que tarda en mandar la información entre servidor y cliente en redes saturadas o wireless. Parece ser que firefox al no llegarle los paquetes a tiempo, dibuja en pantalla lo que tiene en ese momento.

No se si os servirá de ayuda, pero ahi queda.

Un saludo ;)
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:34.