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ó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?
