Saludos.
Estoy aprendiendo CSS y después de mucho leer y sufrir con el maquetado, he logrado un diseño que me satisface, pero tengo un pequeño problema con IE.
Voy a escribir el código relevante para el maquetado:
html:
<body>
<div id="encabezado">
<!--aquí va una imagen-->
<div class="spacer"></div>
</div>
<div id="navegacion">
<!--aquí va una barra de navegación horizontal-->
<div class="spacer"></div>
</div>
<div id="izquierda">
<!--aquí se alternan 3 párrafos y 3 imágenes-->
<!--el primer elemento es un párrafo-->
<!--el ancho de las imágenes es de 180px-->
<div class="spacer"></div>
</div>
<div id="derecha">
<!--aquí se alternan varios títulos h2-->
<!--con sus respectivos párrafos-->
<div class="spacer"></div>
</div>
<div id="pie">
<- texto del pie de página ->
<div class="spacer"></div>
</div>
</body>
CSS:
/*
NOTA 1: todos los bloques tienen borde y color de fondo para poder apreciar bien su posicionamiento mientras aprendo.
NOTA 2: esos márgenes izquierdos de -1px son para que el maquetado funcione bien en NN4. En realidad sólo se necesita en #izquierda pero los demás bloques lo tienen para que estén alineados con #izquierda.
*/
.spacer {
clear: both;
}
#encabezado {
margin-left: -1px;
padding: 0;
background-color: #6c9;
border: 3px solid #000;
}
#navegacion {
margin-left: -1px;
padding: 0.3em 0 0.3em 0;
background-color: #f93;
border: 3px solid #f00;
}
#izquierda {
float: left;
margin-left: -1px;
border: 3px solid #396;
padding: 9px;
width: 180px;
background-color: #dec;
}
#derecha {
margin: 0 0 0 215px;
padding: 0;
background-color: #cc6;
border: 3px solid #03f;
}
#pie {
clear: both;
margin-left: -1px;
border: 3px solid #000;
padding: 3px 0 7px 0;
background-color: #e4e4e4;
text-align: center;
}
He probado la página en:
WXP SP2: Firefox 1.07, IE6, Opera 8.5, NN 4.03 y NN 3.04 (para ver la página sin CSS).
W98 SE: IE6 y NN 4.7.
También he probado con diferentes resoluciones de pantalla.
De paso, no tengo oportunidad de probar la página con otros navegadores y/o sistemas operativos, por lo que si alguien ve la página mal en alguna combinación SO/navegador o ve en el código algún problema en potencia, agradecería algún comentario al respecto.
Volviendo al problema:
La columna derecha es mucho más larga que la izquierda. En todos los navegadores que cité obtengo los resultados esperados pero en IE6 el texto de la columna derecha se desplaza ligeramente (unos 2 o 3px) hacia la izquierda cuando se sobrepasa el borde inferior de la columna izquierda. Más bien creo que el texto de la columna derecha que está en línea con la columna izquierda se desplaza hacia la derecha porque dicho texto no toca el borde izquierdo y el restante sí. En los otros navegadores el texto siempre toca el borde en la columna derecha.
Es como si la presencia de la columna izquierda repeliera al texto de la columna derecha.
He probado cambiando el margen izquierdo de la columna derecha, quitando bordes, etc.
El problema desaparece si le doy un ancho fijo a la columna derecha pero quiero un ancho que se ajuste a la pantalla.
Espero que alguien pueda ayudarme con la solución.
Gracias por su tiempo.
Ligero desplazamiento de texto en IE.
Moderador: Moderadores
-
tacitoimpli
Ya está solucionado.
Encontré la solución en otro lugar. La escribo aquí para los que tengan un problema similar:
Con especificar que el contenedor #derecha tenga un alto de 1% se arregla el problema.
Para los que tengan interés, en la siguiente dirección hay algunos consejos básicos para evitar problemas comunes con CSS.
http://www.tomatoma.ws/articulo.php?top ... orum_id=28
En esa página hay un vínculo a otra página que explica cómo tener instaladas simultáneamente varias versiones de IE en la misma PC. Desde la versión 3 hasta la 6. La página en cuestión es:
http://www.quirksmode.org/browsers/multipleie.html
Suerte.
Con especificar que el contenedor #derecha tenga un alto de 1% se arregla el problema.
Para los que tengan interés, en la siguiente dirección hay algunos consejos básicos para evitar problemas comunes con CSS.
http://www.tomatoma.ws/articulo.php?top ... orum_id=28
En esa página hay un vínculo a otra página que explica cómo tener instaladas simultáneamente varias versiones de IE en la misma PC. Desde la versión 3 hasta la 6. La página en cuestión es:
http://www.quirksmode.org/browsers/multipleie.html
Suerte.