Ver Mensaje Individual
  #3 (permalink)  
Antiguo 13/04/2010, 08:29
endiuc
 
Fecha de Ingreso: abril-2010
Mensajes: 7
Antigüedad: 14 años
Puntos: 1
Respuesta: ¿IE multiplica el espacio del margin?

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; }