IE7: Div con margin:auto e imagen de fondo centrada no coinciden

Wind · #1 (**permalink**) 18/01/2009, 14:30

Ok, he buscado en muchos lugares y he encontrado problemas de centrado de elementos pero mi caso es diferente..

Problema
Tengo un div [id='contained'] con la propiedad margin en 'auto' y con un ancho definido en px. Otro div [id='container'] que contiene al primero y el cual tiene un ancho del 100% con una imagen de fondo centrada. No hay paddings ni margins ni borders.

El div se centra.. bien!
El fondo se centra.. genial!

PERO quedan desfasados por 1px! Esto sólo ocurre en IE7 (probado correctamente en FF, Chrome y Safari) y he reducido el código al mínimo para eliminar posibilidades y aún así tengo el problema.

URL: http://dan.exofire.net/test_margin_ie7/test.html

En la siguiente imagen pueden ver el screenshot amplificado y con otros tonos poco más contrastantes en caso de que no se alcance a apreciar el traslape. El cuadro naranja es el div centrado, todo lo demás es la imagen de fondo centrada.

Zoom: http://dan.exofire.net/test_margin_ie7/preview.jpg

Como verán el código es muy simple aunque el problema lo noté teniendo un layout completo y mucho más complejo, pero fui eliminando elementos y estilos hasta que llegué a esto y ya no sé que pueda ser. Ya tengo bastante tiempo haciendo maquetaciones y CSS pero nunca había notado este problema.

HTML

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Colegio Gastron&oacute;mico del Sureste ::</title>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<link href="test.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<div id="container">
		<div id="contained"></div>
	</div>
</body>
</html>

CSS

Código:

body,html,div,p { margin:0; padding:0; }

#container{
	height:100%;
	width:100%;
	background:transparent url(test.jpg) repeat-y top center;
}

#contained{
	width:290px;
	height:320px;
	background:#FF2354;
	margin:0 auto;
	text-align:center; /* incluso intenté con esto, jeje */
}

Datos adicionales:
La imagen de fondo tiene 320px de ancho: la parte clara del centro mide 290px pues aqui debe encajar el div. Esto ya lo verifiqué así que el problema no es la imagen de fondo.

Debo decir que he encontrado una solución creando un CSS para IE7 posicionando el DIV ese pixel extra hacia la derecha pero creo que se puede solucionar de otra forma o entender porque pasa esto.

Alguien, por favor?

kseso? · #2 (**permalink**) 18/01/2009, 15:23

Quizás sea cuestión de "resetear" el css.

Tienes mucho donde elegir

Un saludo

Mikmoro · #3 (**permalink**) 18/01/2009, 16:20

Te puedo contar lo que sé, porque no es la primera vez que me ocurre:
¿te has fijado si al ir reduciendo la ventana en horizontal muy poco a poco ese descuadre va cambiando?

Al parecer IE7 tiene un problema al usar los anchos en porcentajes, y es como si no fuera capaz de usar pasos de números pares al reducir la ventana, de manera que siempre quitara algo de tamaño a ambos lados para que todo quedara centrado. Así, en cada reducción quita un pixel. Muy bien, pero... ¿de qué lado? Pues una vez de un lado y otra del otro, con lo que si reduces la ventana realmente despacio verás que una vez encaja y a la siguiete no, así sucesivamente.
Bueno, no estoy seguro de que sea lo que te ocurre exactamente (aunque creo que es eso), pero a mi me ha pasado varias veces, y pegando tu código en un html, es lo que veo.

¿Cómo solucionarlo? creo que necesitas cambiar de estrategia a la hora de conseguir ese efecto, y como tal y como has dicho, lo has comprobado una vez que ya tenías toda la estructura, habría que verla y conocerla para recomendarte cuál sería mejor en este caso.

Mikmoro · #4 (**permalink**) 18/01/2009, 16:29

Quizá lo puedas intentar así, pero depende del resto de tu estructura:

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Colegio Gastronómico del Sureste ::</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

<title></title>
<style type="text/css">
body,html,div,p { margin:0; padding:0; }
#container{height:100%;}
#caja {background: transparent url(test.jpg) repeat-y top center;
width:320px;
margin:0 auto;
}
#contained {width:290px;
height:320px;
background:#FF2354;
margin:0 auto;
}
</style>
</head>
<body>
<div id="container">
<div id="caja">
<div id="contained"></div>
</div>
</div>
</body>
</html>

Wind · #5 (**permalink**) 18/01/2009, 18:34

Exactamente es lo que había estado pensando!
Efectivamente, inmediatamente de postear el primer mensaje intenté hacer la misma prueba con un ancho impar. Reduje en 1 px el ancho de la imagen de fondo y del ancho del div (aunque bastaba con cambiar el ancho de la ventana

). Y efectivamente encajó!........ El problema es que no quiero cambiar mi layout a un ancho de -1px pero creo que eso tendré que hacer.. D:

He estado intentando muchas cosas y al parecer también son muchos factores:

Estoy probando todo esto con el IE8 (que tiene el modo simulación de IE7). Además para cada uno de estos modos pueden activarse otro modo "Compatibility View" lo hace que obtenga muchos resultados y yo no sé para que sirve o que efecto tiene en mi CSS [alguien sabe?].. pero siempre hay un problema. O es el footer que no llega al fondo o es el problema original que planteé. Hay otra cosa extraña... hice lo que me aconsejaste con el div extra #caja en la página de prueba, y no funcionó. Lo que lo arregló fue activar el modo de vista de compatibilidad como IE7 pero solo en el ejemplo, pues en el layout completo sigue habiendo el mismo problema y que al reducir el ancho de la ventana se arregla.

Y otra cosa para dejar las cosas peor: El ejemplo que ahora luce bien localmente lo subo tal cual está a mi dominio [http://dan.exofire.net] y sigue viéndose mal sin cambiar el modo ni nada en el MALDITO IE7!! D:<

Entonces yo ya no entiendo por que a veces si y a veces no. Cuando está arriba sí cuando es local no. Que si este modo que si el otro. Es una locura!!

Así que por ahora me olvidaré de eso y terminaré de hacer la page en FF y luego veo que haré con el damn IE.... lo extraño es que pensé que sería un problema más común pero no he oído mucho de esto.

Agradezco las opciones ofrecidas [por cierto el reseteo css tampoco funcionó, obvio]. Me gustaría saber si alguien más ha pasado por esto.

Gracias!

Wind · #6 (**permalink**) 18/01/2009, 21:46

http://www.positioniseverything.net/bg-centering.html

O:

Yo no entender las soluciones propuestas...

Mikmoro · #7 (**permalink**) 19/01/2009, 04:11

Yo sólo puedo decirte: no apliques mi ejemplo a tu archivo; simplemente copia todo el HTML que he puesto en un archivo nuevo y luego lo miras con IE7, y me dices si está solucionado o no. Te adelanto: SÍ.

Cómo luego lo apliques a tu estructura, como ya te dije no se puede saber sin verla, pero que eso por sí solo elimina tu problema inicial en el ejemplo te lo garantizo.

Wind · #8 (**permalink**) 19/01/2009, 15:28

Ok. Funciona! Pero creo que ahora lo que viene es un problema de replantear el layout.

Entonces debo entender que no debo centrar mi fondo respecto a un elemento con width de 100% si no con respecto a un elemento con ancho fijo e igualmente aplicando el margin auto...

Muchas gracias, el resto ya es problema mío. Si tengo problemas, los plantearé.
~ Saludos!

Mikmoro · #9 (**permalink**) 19/01/2009, 16:23

Cita:

Iniciado por Wind

Entonces debo entender que no debo centrar mi fondo respecto a un elemento con width de 100% si no con respecto a un elemento con ancho fijo e igualmente aplicando el margin auto...

Sí, yo diría que es así, gracias a IE7.

Saludos.

Wind · #10 (**permalink**) 19/01/2009, 19:02

Hell yeah! Listo!

Me surgió un problema de layout que comprometía la técnica para resolver el problema del centrado, el footer al fondo y el uso de un wrapper para crear el pequeño degradado oscuro que aparece en la parte superior en el fondo. Al final quedó:

http://dan.exofire.net/test_margin_ie7/preview.jpg

Idéntico en los 2 exploradores. Muchas gracias Mikmoro!

P.D. No soy defensor de IE (obvio) pero el artículo que cité me dió a entender que no es cuestión de un único explorador aunque fue el IE con el que descubrí el problema :P

~ Saludos!