Hola a todos!
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> Muy simple! ¿no creen? ahora le pongo la estructura de la hoja de estilo:
Código:
* { /* 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;
}
Por favor, no les pido que me den la solución exacta (si la tiene mejor
). Sólo que me oriente sobre este bug de IE para poder resolverlo.
Muchas gracias y saludos a todos!!