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 ). Sólo que me oriente sobre este bug de IE para poder resolverlo.* { /* 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; }
Muchas gracias y saludos a todos!!