Antes que nada gracias por tomarse el tiempo de leer esto.

Estoy haciendo un diseño muy muy simple, que en Mozilla Firefox, Safari, Opera y Konqueror se ve justo como yo quiero que se vea, pero... en IE6 e IE7 ¡todo se arruina! Por favor entren a la página http://rmf.fciencias.unam.mx/~cnf/ con IE y luego con cualquier otro, para que mírenlo ustedes mismos, el marco negro es la etiqueta body y el marco rojo es un div de "Contendio" que no debería tener ese espacio a la izquierda entre body.
Les explico la estructura del documento y si entran a la página cada div esta enmarcado:
Código HTML:
<body> <!-- enmarcada en negro --> <div id="Contendio"> <!-- enmarcada en rojo --> <div id="Cabeza">Bla, bla...</div> <!-- enmarcada en verde --> <div id="ColumnaIzquierda">Bla, bla...</div> <!-- enmarcada en amarillo --> <div id="ColumnaDerecha">Bla, bla...</div> <!-- enmarcada en cian --> <div id="ColumnaCentro">Bla, bla...</div> <!-- enmarcada en magenta --> <br class="BorraFloat"/> <div id="Pies">Bla, bla...</div> <!-- enmarcada en azul --> </div><!-- Fin Contenido --> </body>
Código:
Por favor, no les pido que me den la solución exacta (si la tiene mejor * { /* Pone todo a cero */
margin:0;
padding:0;
}
body {
margin: 0;
padding: 0;
}
#Contenido {
margin: 0;
padding: 0;
}
#Cabeza {
margin: 0;
padding: 0;
overflow: auto; /* arregla el largo de la caja para el contendio flotante */
}
#ColumnaIzquierda {
float: left;
width: 11em;
}
#ColumnaDerecha {
float: right;
width: 11em;
}
#ColumnaCentro {
margin: 0 12em 0 12em;
}
#Pies {
margin: 0;
padding: 0;
}
.BorraFloat {
clear: both;
height: 0;
font-size: 0px;
line-height: 0px;
}
). Sólo que me oriente sobre este bug de IE para poder resolverlo.Muchas gracias y saludos a todos!!


