(Disculpas por el título, pero eso es lo que siento en este momento.)Amigo, ¿dónde está mi columna?
que recientemente se les ha dado la oportunidad ... ... rediseñar completamente el diseño de un sitio web de apoyo. En el interés de mantener mi sencilla CSS y mi HTML semántico, decidí usar una versión modificada de the "holy grail" layout (la principal diferencia está en movimiento la columna de la derecha dentro de la columna central, lo que simplifica aún más las cosas, y haciendo la columna central de ancho fijo)
Después de una cantidad insignificante de tocar el violín, tuve la nueva disposición de trabajar en FF3, Chrome y Opera, lo que significaba que era hora de disparar hasta IE6. Previsiblemente, el diseño se rompe (la columna izquierda faltaba por completo). Sin embargo, no esperaba que se rompiera tan espectacularmente - parece que he desencadenado algún tipo de error de renderizado en IE6 que no puedo aislar ni eliminar.
Al adaptar el diseño del Santo Grial, inicialmente había omitido el truco específico de IE6 que utiliza, que no es (¿no debería ser?) Necesario con las modificaciones que hice en la columna de la derecha, ya que cuentas para el ancho de esa columna, que no aparece en el mismo nivel en mi diseño. Aún así, volver a agregarlo fue mi primera suposición, pero resultó requerir un número muy extraño (246px, que no aparece en ningún otro lado en la hoja de estilo), así que intenté cambiar el tamaño de la ventana para asegurarme de que no estaba relacionado al tamaño de página. Para mi sorpresa, la columna saltó ~ 1000 píxeles a la derecha, mucho más allá del borde de la página.
Volviendo IE6 y extracción de la corte, el mismo comportamiento se produce al cambiar el tamaño, sólo que en lugar de saltar desde el lado izquierdo de la disposición fuera de la página, que aparece de la nada a la derecha lado -hand del diseño. He engañado con cada parte del diseño que parece estar remotamente relacionado y busqué en Google todos los errores de representación de IE6 que conozco, pero parece que no puede eliminar el comportamiento de cambiar el tamaño de la página.
Alguien ha visto este error antes, si es error? código completo sigue:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Modified grail layout</title>
<style type="text/css">
* {
border: 0;
margin: 0;
padding: 0;
}
#main {
background: white;
overflow: auto;
padding-left: 180px;
}
#content {
background: #dfd;
float: left;
padding: 10px 10px 0;
width: 800px;
}
#left {
background: #ccc;
float: left;
margin-left: -100%;
position: relative;
padding: 10px 10px 0;
right: 180px;
width: 160px;
}
#right {
background: #fdd;
float: right;
margin-bottom: 10px;
padding: 10px 10px 0;
width: 160px;
}
#top {
margin: 0 auto;
width: 1000px;
}
body {
background: #ddf;
}
/* fake content */
#cc1 {
height: 320px;
width: 800px;
}
#cc2 {
height: 320px;
margin-right: 190px;
}
#cc3 {
height: 160px;
margin-right: 190px;
}
#lc1 {
height: 120px;
margin-left: auto;
margin-right: auto;
width: 144px;
}
#lc2 {
height: 300px;
width: 160px;
}
#lc3 {
height: 400px;
width: 160px;
}
#rc1 {
height: 400px;
width: 160px;
}
#rc2 {
height: 300px;
width: 160px;
}
div.fake-content {
background: #666;
color: white;
margin-bottom: 10px;
}
/* Internet Explorer (all) */
#ie body {
text-align: center;
}
#ie #left {
text-align: center;
}
#ie #left * {
text-align: left;
}
#ie #right {
margin-bottom: 0;
}
#ie #top {
text-align: left;
}
/* Internet Explorer 6 */
#ie6 #left {
left: 246px; /* WTF!? */
}
</style>
</head>
<body>
<!--[if IE 6]><div id="ie"><div id="ie6"><![endif]-->
<!--[if IE 7]><div id="ie"><div id="ie7"><![endif]-->
<!--[if IE 8]><div id="ie"><div id="ie8"><![endif]-->
<div id="top">
<div id="main">
<div id="content">
<div id="cc1" class="fake-content">cc1</div>
<div id="right">
<div id="rc1" class="fake-content">rc1</div>
<div id="rc2" class="fake-content">rc2</div>
</div>
<div id="cc2" class="fake-content">cc2</div>
<div id="cc3" class="fake-content">cc3</div>
</div>
<div id="left">
<div id="lc1" class="fake-content">lc1</div>
<div id="lc2" class="fake-content">lc2</div>
<div id="lc3" class="fake-content">lc3</div>
</div>
</div>
<p id="footer">©2009 Blah blah blah</p>
</div>
<!--[if IE]></div></div><![endif]-->
</body>
</html>
No estoy muy seguro de por qué está utilizando el selector "#ie body" en lugar de "#ie #body". Probablemente usaría una identificación que no era lo mismo que un elemento HTML para evitar confundirme. – snippid
Er ... En realidad quise cambiar eso (habiéndolo tropezado una vez). Déjame hacer eso ahora ... –