Div desplazado levemente en IE

[jabi]

Buenas a todos,

A ver si alguien me puede echar una mano con ésto, quizás sea sencillo pero no logro ver el motivo de lo que ocurre.

Comienzo poniendo una foto, una imagen vale más que mil palabras, ¿no?



Como se puede ver, el div de color verde aparece desplazado un pelín a la izquierda, no es que me vaya la vida en este detalle pero no comprendo por qué sucede ésto en IE (6 ó 7, en ambos) y en FF ó Chrome se ve perfectamente. Además ocurre únicamente cuando la ventana no está maximizada, si la maximizo se ve sin problemas.

Os pego el HTML de y los CSS que intervienen en todo esto.
La estructura se compone básicamente de una capa general (.principal), y dentro de ella una capa para la cabecera (.cabecera, que es la capa desplazada que nos ocupa), otra para el menú lateral con las secciones (.menu_izq), otra para el contenido central (.contenido) y una última para el pie de página (.pie):

HTML:

Código:

<div id="divPrincipal" class="principal">
    <div id="divCabecera" class="cabecera">
    </div>
    <div id="divMenuIzq" class="menu_izq">
    ........ contenido del menú ........
    </div>
    <div id="divContenido" class="contenido" runat="server">
    ........ datos sin importancia ........
    </div>
    <div id="divPie" runat="server" class="pie">
    ........ contenido del pie de página ........
    </div>
</div>

CSS:

Código:

body
{
	font-family: Verdana;
	font-size: 12px;
	outline: 0;
	margin: 0px;
	padding: 0px;
	background: #FFF url(../img/background2.jpg) repeat-y fixed center 50%;
}

.principal
{
	width: 800px;
	margin: 0 auto;
}

.cabecera
{
	width: 800px;
	height: 159px;
	margin-bottom: 10px;
	/*background: url('../img/img_cabecera2.jpg') no-repeat;*/
	background-color: #339966;
}

.contenido
{
	width: 650px;
	float: right;
	min-height: 450px;
	height:auto !important;
	height:450px;
}

.menu_izq
{
	width: 148px;
	float: left;
	margin-top: 6px;
	margin-left: 1px;
}

.pie
{
	width: 800px;
	clear: both;
	text-align: center;
	border-top: 1px solid #339966;
	padding: 2px 0px;
}

Estoy utilizando de background una imagen de dimensiones 840 x 2 px, la cual se repite por el estilo definido en body (repeat-y).

¿Alguna idea de por qué sucede ésto con IE?

Saludos, perdón por el testamento y gracias de antemano

[Mikmoro]

¿Has probado a cambiar el width: 800px; de la cabecera por width: 100%;?

[jabi]

He probado y se produce el mismo efecto pero ahora cuando la ventana está maximizada. Cuando es más pequeña encaja bien.

No sé si tiene que ver con una mala colocación de la imagen de fondo, como ya dije tiene un ancho de 840 px, es decir, 40 px más que el ancho de la cabecera. Por cada lado sobresalen 20px (al estar centrado el background) que corresponden al degradado blanco-negro.

¿Alguna idea más?

Muchas gracias Mikmoro.

[Mikmoro]

No entiendo bien cómo estás haciendo lo de la sombra, pero juraría que el espacio que queda a los lados de la sombra en el gráfico no es absolutamente simétrico. Fíjate que la línea verde de "inicio" no llega a tocar la sombra.

Puedes probar a quitarle la imagen al body y ponérsela a .principal

[Fuzzylog]

Prueba con:


.cabecera
{
width: 800px;
height: 159px;
margin-bottom: 10px;
/*background: url('../img/img_cabecera2.jpg') no-repeat;*/
background-color: #339966;
margin-right:-1px; //y si no funciona prueba con padding-right:-1px;
}

html>/**/body .cabecera
{
width: 800px;
height: 159px;
margin-bottom: 10px;
/*background: url('../img/img_cabecera2.jpg') no-repeat;*/
background-color: #339966;
}


=> html>/**/body sirve como hoja de estilo para navegadores modernos pero excluyendo el IE7. Si quitas el /**/ no funcionaría el efecto del comentario condicional así que se incluiría el IE7, así que ten cuidado.

[jabi]

Buenas a ambos, muchas gracias por responder.

Antes que nada aclarar una cosa que he detectado esta tarde:
que encaje bien el div al maximizar y mal al hacer más pequeña la ventana ocurría con IE7, porque en IE6 justamente lo contrario.

Mikmoro, vi lo que comentaste de la línea verde, es cierto y me decantó a pensar lo mismo, que la imagen no era simétrica, pero comprobé que lo era perfectamente, asi que más confusión aún porque si no lo fuera tampoco se vería bien en otros navegadores, ¿no?

Lo que comentas de poner la imagen al div principal no sabría como hacerlo para que visiblemente quedara igual, la idea era que fuera el body el que la tuviera para que el div principal contuviera toda la información del sitio.

Fuzzylog, probé la opción que me comentaste pero lamentablemente todo quedó tal cual. De todas formas no conocía lo del comentario condicional que pones, asi que muchas gracias

Y bueno, para terminar, y aunque parezca de chiste, acabo de probarlo y encaja bien tanto en IE6 como en IE7. Y os puedo asegurar que sin cambiar absolutamente nada, porque de hecho la versión con la que he probado es una antigua en la que la cabecera tiene los 800px de width en vez del 100%. La otra la probé en otro pc.

No entiendo nada, pero al fin y al cabo se ha "arreglado".

Muchas gracias a ambos de nuevo, un saludo.