Problema con float en IE6

mda · #1 (**permalink**) 10/05/2009, 11:24

Buenas tengo un problema con Ie6 y dos DIV con float...

el codigo este:

Código PHP:

  <link href="est.css" rel="stylesheet" type="text/css"> 
<style type="text/css"> 
<!-- 
a:link { 
    color: #000000; 
    text-decoration: none; 
} 
a:visited { 
    text-decoration: none; 
    color: #000000; 
} 
a:hover { 
    text-decoration: underline; 
} 
a:active { 
    text-decoration: none; 
} 
--> 
</style><body> 
 
<div class="div6c"> 
<div class="div6b"> 
<div class="div6"> 
<div class="div7"><a href="index.php">INICIO</a> - <a href="condiciones.php">CONDICIONES</a> - <a href="contacto.php">CONTACTO</a> - <a href="preguntas.php">PREGUNTAS FRECUENTES</a></div> 
<div class="div8"><a href="index.php">ESPA&Ntilde;OL</a> -<a href="e/index.php">ENGLISH</a></div> 
</div> 
</div> 
</div>

Código:

.div6c {
	width: 750px;
	margin-right: auto;
	margin-left: auto;
	height: 40px;
}

.div6b {
	width: 750px;
	margin-right: auto;
	margin-left: auto;
	height: 40px;
	float: left;
}

.div6 {
	width: 750px;
	margin-right: auto;
	margin-left: auto;
	background-color: #E9E9E9;
	height: 20px;
}




.div7 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #000000;
	text-decoration: none;
	font-weight: bold;
	line-height: 18px;
	background-color: #E9E9E9;
	float: left;
	padding-left: 80px;
	text-align: right;
	margin-left: 113px;
}

.div8 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #000000;
	text-decoration: none;
	font-weight: bold;
	line-height: 18px;
	margin-right: auto;
	margin-left: auto;
	background-color: #E9E9E9;
	float: right;
	width: 200px;
}

el problema es que el div8 aparece debajo de div7 cuando lo que necesito es que este a la derecha de div8

como soluciono esto?? preferentemente modificando solo la hoja de estilos, ya que son varios archivos en los que aparece el error

muchas gracias!!

pd: dejaria una captura para que vean el error (que solo aparece en Ie6) pero no puedo por el filtro antispam.. si quieren se las paso por pm

AlbertoGarcia · #2 (**permalink**) 10/05/2009, 15:27

El div7 no tiene ancho lo que hace que por defecto ocupe el 100% del espacio. Dale un ancho.

Salud!

mda · #3 (**permalink**) 10/05/2009, 17:50

Gracias por la respuesta alberto, pero sigue igual...
probe con 318 pixeles de ancho y el problema con IE6 persiste...

alguna otra sugerencia??

edito: bueno estuve buscando mucho en internet y hay un monton de gente con el mismo problema... pero en ningun caso se aplica al mio... a todos les pasa eso del margen de 3px que agrega Ie6, pero en mi caso no funciona restar 3px.. asi que otra cosa esta pasando..

que puede ser??

IruLaN · #4 (**permalink**) 11/05/2009, 01:50

Creo en el div8 deberías poner float:left; no float:right;...

AlbertoGarcia · #5 (**permalink**) 11/05/2009, 02:59

hola de nuevo, cuando tengas problemas con cajas que no sepas exactamente cual es el comportamiento del navegador con las mismas, dale un borde provisional a cada una, por ejemplo: border: 1px dotted #000; (al final del desarrollo las eliminas)

Si aplicas esta regla a div7 y a div8 verás claramente que no queda espacio para div8 y por eso se va abajo, quítale margen a div7.

Salud!

adriancitov7 · #6 (**permalink**) 11/05/2009, 03:06

con esto tendria que ir todo bien

Código:

<!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" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>asdasdada</title>
<style type="text/css">
* {
	margin:0;
	padding:0;
}
body {
	text-align:center;
	font-family: Arial, Helvetica, sans-serif;
	font-size:0.6em;
}
.contenedor {
	width: 750px;
	margin:0 auto;
	height:40px;
	text-align:left;
	background-color: #E9E9E9;
}
a {
	color:#000;
	text-decoration:none;
	font-weight: bold;
	line-height: 40px;
}
.caja1 {
	float: left;
	padding-left: 80px;
	text-align: right;
}
.caja2 {
	float:right;
	width: 200px;
}
</style>
</head>
<body>
<div class="contenedor"> 
<div class="caja1"><a href="index.php">INICIO</a> - <a href="condiciones.php">CONDICIONES</a> - <a href="contacto.php">CONTACTO</a> - <a href="preguntas.php">PREGUNTAS FRECUENTES</a></div> 
<div class="caja2"><a href="index.php">ESPAÑOL</a> -<a href="e/index.php">ENGLISH</a></div> 
</div>
</body>
</html>

Saludos

Aqui lo puedes ver online

http://adriancito.co.cc/pruebas/caja2.html

PD:probado en ie 5.5,6,7,8 firefox 2+ , opera 8+, chrome ..bueno creo que funciona tambien en safari y valida .. me olvidaba el elemento a lo puedes especificar mejor para aplicar esa regla donde quieras y no afecte a todos los enlaces del mismo documento

mda · #7 (**permalink**) 14/05/2009, 18:59

disculpen por no contestar antes, es que justo consegui trabajo nuevo

muchas gracias a todos por responder, lo solucione con el metodo de adriancitov7

ya casi termine la pagina, solo faltaban detalles y cosas q se veian mal en ie6... de haber encontrado este foro antes me hubiese ahorrado muchos lios

un saludo!