Foros del Web » Creando para Internet » CSS »

Ayuda con float. Diferente en FF e IE

Estas en el tema de Ayuda con float. Diferente en FF e IE en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 27/08/2008, 15:50
Avatar de hshadow  
Fecha de Ingreso: abril-2008
Mensajes: 42
Antigüedad: 9 años, 7 meses
Puntos: 0
Ayuda con float. Diferente en FF e IE

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.
  #2 (permalink)  
Antiguo 27/08/2008, 16:18
Avatar de poison_mayer  
Fecha de Ingreso: julio-2008
Mensajes: 69
Antigüedad: 9 años, 4 meses
Puntos: 2
Respuesta: Ayuda con float. Diferente en FF e IE

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&iacute;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>
  #3 (permalink)  
Antiguo 27/08/2008, 16:23
 
Fecha de Ingreso: marzo-2005
Mensajes: 271
Antigüedad: 12 años, 8 meses
Puntos: 1
Respuesta: Ayuda con float. Diferente en FF e IE

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>
  #4 (permalink)  
Antiguo 27/08/2008, 16:30
Avatar de poison_mayer  
Fecha de Ingreso: julio-2008
Mensajes: 69
Antigüedad: 9 años, 4 meses
Puntos: 2
Respuesta: Ayuda con float. Diferente en FF e IE

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&iacute;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>
  #5 (permalink)  
Antiguo 27/08/2008, 17:06
 
Fecha de Ingreso: abril-2006
Mensajes: 25
Antigüedad: 11 años, 8 meses
Puntos: 0
Respuesta: Ayuda con float. Diferente en FF e IE

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.
  #6 (permalink)  
Antiguo 28/08/2008, 12:13
Avatar de hshadow  
Fecha de Ingreso: abril-2008
Mensajes: 42
Antigüedad: 9 años, 7 meses
Puntos: 0
Respuesta: Ayuda con float. Diferente en FF e IE

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.
  #7 (permalink)  
Antiguo 28/08/2008, 13:25
 
Fecha de Ingreso: agosto-2008
Mensajes: 20
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: Ayuda con float. Diferente en FF e IE

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.
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 12:12.