Ayuda con float. Diferente en FF e IE

hshadow · #1 (**permalink**) 27/08/2008, 14:50

Hola a todos. Estoy empezando a desarrollar en modo table-less y tengo un problema. Al hacer flotar los divs (float: left) en IE los divs se van hacia el costado asignado y nada más; pero en FF, si bien siguen en su contenedor este no los reconoce como dentro suyo. Yo entiendo como que en FF flotan en sentido "Z" (z-index, quiero decir) aparte de volar hacia los costados. Como soluciono esto y unifico los efectos? No se quien tiene la razon, si IE o FF, pero me gustaría que en ambos pase lo que pasa en IE.

Miren esto en ambos navegadores y sabrán a qué me refiero.

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
body{
margin:0px;
padding:0px;}

.contenedor{
background-color:#FFFF00;
width:500px;
margin:0px auto 0px;}

.contenido{
float:left;
background-color:#FF0000;
width:55px;
margin:5px;}

</style>
</head>

<body>
<div class="contenedor">
	<div class="contenido">asdf asdf asdf asdf asdf asdf asdf</div>
	<div class="contenido">qwer qwer qwer qwer qwer qwer qwer</div>
	<div class="contenido">zxcv zxcv zxcv zxcv zxcv zxcv zxcv</div>
	<div class="contenido">uiop uiop uiop uiop uiop uiop uiop</div>
</div>
</body>
</html>

Gracias de antemano.

poison_mayer · #2 (**permalink**) 27/08/2008, 15:18

Usa esto, debe servir

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
body{
margin:0px;
padding:0px;}

.contenedor{
position:absolute;
width:500px;
left:50%;
margin-left:-250px;
background-color:#FFFF00
}

.contenido{
float:left;
background-color:#FF0000;
width:55px;
margin:5px;}

</style>
</head>

<body>
<div class="contenedor">
<div class="contenido">asdf asdf asdf asdf asdf asdf asdf</div>
<div class="contenido">qwer qwer qwer qwer qwer qwer qwer</div>
<div class="contenido">zxcv zxcv zxcv zxcv zxcv zxcv zxcv</div>
<div class="contenido">uiop uiop uiop uiop uiop uiop uiop</div>
</div>
</body>
</html>

MandrakeXP · #3 (**permalink**) 27/08/2008, 15:23

creo que deberías romper la cadena de los floast es decir,

definir una clase clear-all

Código:

.clear-all{

clear:both;

}

y usar esto:

Código:

<div class="contenedor">
	<div class="contenido">asdf asdf asdf asdf asdf asdf asdf</div>
	<div class="contenido">qwer qwer qwer qwer qwer qwer qwer</div>
	<div class="contenido">zxcv zxcv zxcv zxcv zxcv zxcv zxcv</div>
	<div class="contenido">uiop uiop uiop uiop uiop uiop uiop</div>
        <div class="clear-all"></div>
</div>

poison_mayer · #4 (**permalink**) 27/08/2008, 15:30

Usa esto, debe servir

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
body{
margin:0px;
padding:0px;}

.contenedor{
position:absolute;
width:500px;
left:50%;
margin-left:-250px;
background-color:#FFFF00
}

.contenido{
float:left;
background-color:#FF0000;
width:55px;
margin:5px;}

</style>
</head>

<body>
<div class="contenedor">
<div class="contenido">asdf asdf asdf asdf asdf asdf asdf</div>
<div class="contenido">qwer qwer qwer qwer qwer qwer qwer</div>
<div class="contenido">zxcv zxcv zxcv zxcv zxcv zxcv zxcv</div>
<div class="contenido">uiop uiop uiop uiop uiop uiop uiop</div>
</div>
</body>
</html>

visceras · #5 (**permalink**) 27/08/2008, 16:06

Al hacer "flotar" un elemento este sale fuera de flujo y es tratado diferente. Tu has hecho que todos los elementos dentro de ".contenedor" salgan fuera del flujo dejando ".contenedor" vacio.

Ahora que has empezado a usar css debes saber que IE siempre esta equivocado. IE es el peor browser que haya existido jamas, y ya veras los dolores de cabeza que te da con CSS.

En fin, empieza a usar FF como tu browser y descargate Firebug, sin el no habra forma de que te enteres de lo que esta pasando.

Añade esto a tu codigo y FF mostrara tu fondo amarillo.

Cita:

.contenedor{ overflow: hidden; }

Otra cosa, debes saber que cada vez que haces un float IE añade 3px de margen (asi, porque le da la gana). Leete esto y con suerte te ahorraras un par de horas de sueño http://www.positioniseverything.net/explorer/threepxtest.html.

hshadow · #6 (**permalink**) 28/08/2008, 11:13

Gracias. Ya lo arregle con un clear al final. Despues pruebo tu idea del overflow. Ya sabía lo patético que es IE, solo quería darle una chance de tener razón una vez en su existencia, jeje. Hasta luego y gracias de nuevo.

sergivv · #7 (**permalink**) 28/08/2008, 12:25

Hola a todos.

Estoy preparando una página personal y casualmente me encuentro con el problema con los float. Con IE7 sin problema pero con FF3 no me sale bien.
He probado las soluciones del post y algo me solucinan pero no me sale la imagen de fondo que tengo puesta.

La página que me da fallos es http://www.astrohobby.es/galeria.html. Tendría que aparecer la imagen de fondo hasta justo antes del enlace de contacto pero no aparece.

Un saludo y gracias.