porque este div no me respeta el margen?

00israel · #1 (**permalink**) 01/04/2012, 15:53

tengo este código, y no entiendo porque el primer div "cuadro-blanco-fila-1" se ve bien en I.E.6 y los demás no.

Código HTML:

<!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>prueba</title>
<style type="text/css">
* {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
html, body {
	height: 100%;
	margin: 0px;
	background-color: #F0F0F0;
}
#cuadro-blanco-fila-1 {
	background-color: #FFF;
	height: 15px;
	width: 845px;
	border-right-width: thin;
	border-left-width: thin;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #ccc;
	border-left-color: #ccc;
	margin-left: 73px;
	font-family: "Times New Roman", Times, serif;
	font-size: 12px;
	padding-right: 25px;
	padding-top: 25px;
	text-align: right;
}
#cuadro-blanco-fila-2 {
	background-color: #FFF;
	float: left;
	height: 500px;
	width: 870px;
	border-right-width: thin;
	border-left-width: thin;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #ccc;
	border-left-color: #ccc;
	margin-left: 73px;
	clear: right;
}
#cuadro-blanco-fila-3 {
	font-family: "Times New Roman", Times, serif;
	font-size: 13px;
	background-color: #fff;
	text-align: right;
	clear: both;
	float: left;
	height: 60px;
	width: 849px;
	margin-left: 73px;
	border-right-width: thin;
	border-left-width: thin;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #ccc;
	border-left-color: #ccc;
	padding-right: 21px;
}
#cuadro-blanco-fila-4 {
	background-color: #fff;
	clear: both;
	float: left;
	height: 100%;
	width: 870px;
	margin-left: 73px;
	border-right-width: thin;
	border-left-width: thin;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #ccc;
	border-left-color: #ccc;
}
</style>
</head>
<body>
<div id="cuadro-blanco-fila-1"></div>
<div id="cuadro-blanco-fila-2"></div>
<div id="cuadro-blanco-fila-3"></div>
<hr />
<div id="cuadro-blanco-fila-4"></div>
</body>
</html>

Me explico, todos llevan un margen de 73 px a la izquierda, bueno pues el único que mantiene esta distancia es el div que mencionaba antes "cuadro-blanco-fila-1", los demas se situan más alejados del borde izquierdo y no entiendo porque?

solo me pasa esto viendolo por I.E.6, si lo veo por safari, firefox o chrome se ve bien.

no entiendo nada, por mas vuelta que le doy no veo donde esta el error

gracias

00israel · #2 (**permalink**) 01/04/2012, 16:02

creo que he dado con ello, pero no se porque pasa eso y porque lo he resuelto poniendo lo que he puesto.

Le he añadido una linea a los CSS indicando display:inline y ahora me funciona.

¿porque?

00israel · #3 (**permalink**) 01/04/2012, 16:06

bueno yo mismo me contesto, porque al parecer he leido que es un problema típico de I.E6 y que si no pones display:inline duplica el espacio de margen.

SOLUCIONADO!