¿IE multiplica el espacio del margin?

[endiuc]

Hola chicos soy nuevo en esto, y tengo que pediros disculpas desde ya, si meto la pata en algo.

Llevo varios dias vesitando vuestra página y he conseguido solucionar gran parte de los problemas que me han ido surgiendo con el material que he encontrado aquí, pero al final he encontrado un hueso duro y no soy capaz de echarlo adelante.

Me explico, estoy rediseñando el "theme" default de wordpress, y le estoy poniendo un menú rollover con imagenes hecho con CSS. En Firefox funciona perfectamente, pero en IE 6 se desplaza hacia la izquierda cuando paso el ratón.

He aislado el menu y funciona perfectamente en los dos navegadores, pero al incluirlo dentro de la hoja de Style de "theme" me pasa el error que os he contado.

También he conseguido colocarlo correcamente variando el:

margin-left: -20px;

del DIV donde esta colocado el menu, y la primera de la izquierda se coloca correctamente, pero el resto se va a la izquierda 20 px y va aumentando, sa segunta 40 px y la tercera 60 px etc.

He leído en alguna página que el IE multiplica los valores de margin y proponian una lia de codigo para solucionarlo ¿sabeís algo sobre esto?

Desde ya gracias por vuestro tiempo y sabiduria. Esla primera vez que me enfrento a un proyesto de este ti oy estoy un poco perdido.

P.D: si necesitas cualquier muestra del CSS pedidlo por favor.

[webosiris]

concretamente el bug al que haces referencia es Doubled Float-Margin Bug se soluciona o con display:inline al elemento flotado, o reduciendo el margen a la mitad solo para IE6 (con comentarios condicionales)

[endiuc]

Hola Webosiris, muchas gracias por responder.

Yo también creí encontrar la solución en el "Doubled Float-Margin Bug" de hecho yo mismo pensaba que era lo que estaba buscando, y me ha servido como parte de la solución.

Al poner Display: inline; se me han colocado una opcion (en concreto la tutorials) pero las otras siguen a su "flor"

Estoy seguro que es un problema con los margenes pero no sé como solucionarlo. Aquí te pongo el codigo y ruego que me perdones por que está todo "al retortero" pero como ya te dije es la primera vez que hago algo con CSS y voy probando y quitando. Bueno no me enrollo gracias por la respuesta.

#navigation {
background: url("images/menu2.jpg");
margin-top: -69px;
margin-left: 15px;
*margin-top: -59px;
*margin-left: 15px;
z-index: 100;
_width: 960px;
width: 949px; /* Ancho del contenedor de nuestro menú*/
height: 40px; /*Altura del contenedor de nuestro menú*/
_height: 40px;
}

#navigation ul {
display: block;
*display:inline;
*zoom:1;
list-style: none;
background: url("images/menu2.jpg") top left no-repeat;
padding: 0;
width: 960px; /*Ancho de nuestro menú (la imagen)*/
_height: 40px;
height: 40px; /*Altura de la imagen*/

}

#navigation ul li {
float: left;
*display:inline;
*overflow:hidden;
*zoom:1;
position: relative;
z-index: 100;
*margin-left: -20px;
padding: 0;
width: 130px; /*Ancho de cada item u opción de nuestro menú*/
*width: 130px;
*height: 40px;
height: 40px; /*Altura de cada item*/

}

#navigation ul li a {
display: block;
text-decoration: none;
text-indent: -999em; /* Ocultamos el texto */
width: 130px; /* Ancho de cada link de nuestro menú*/
*width: 130px;
*height: 40px;/* Alto de cada link*/
height: 40px;

}

#navigation ul li a:hover,
#navigation ul li a.current {

background-image: url("images/menu2.jpg"); /* Estado activo & Over */
background-repeat: no-repeat;
}
#navigation ul li#home a:hover { background-position: -0px -40px; }
#navigation ul li#home a.current,
#navigation ul li#home a.current:hover { background-position: -0px -80px; }

#navigation ul li#tutorials a:hover { background-position: -130px -40px; }
#navigation ul li#tutorials a.current,
#navigation ul li#tutorials a.current:hover { background-position: -130px -40px; }


#navigation ul li#resources a:hover { background-position: -260px -40px; }
#navigation ul li#resources a.current,
#navigation ul li#resources a.current:hover { background-position: -260px -80px; }

#navigation ul li#contact a:hover { background-position: -390px -40px; }
#navigation ul li#contact a.current,
#navigation ul li#contact a.current:hover { background-position: -390px -80px; }

#navigation ul li#prueba a:hover { background-position: -520px -40px; }
#navigation ul li#prueba a.current,
#navigation ul li#prueba a.current:hover { background-position: -520px -80px; }

#navigation ul li a.current:hover { cursor: default; }