Problema con <ul> y navegadores

[Vice]

Buenos días.
Mi problema reside en la diferencia entre IE y Firefox en un <ul> que he creado para un menú en la parte izquierda de la pantalla. El problema está en que el firefox me mete un margen por la izquierda que el internet explorer no hace, con lo que o lo ajusto en uno navegador pero no en otro.
Los estilos que uso para las listas son:

Código:

ul{ list-style-type:none; }

#leftMenu{ width:160px; height:300px; position:absolute; margin-left: 0px; margin-top: 90px;  }
#leftMenu ul { width:160px; margin-left: -40px; font:12px/30px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; text-transform:uppercase; }
#leftMenu ul li{ float:left; font:12px/30px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; text-transform:uppercase;}
#leftMenu ul li a{ width:160px; height:30px; display:block; background-color: #FFFFFF; color:#9A2E00;  text-decoration:none; text-align:center;}
#leftMenu ul li a:hover{ background:url("../Imagenes/menubg-hover2.gif") 0 0 no-repeat #00818A; color:#00818A;}
#leftMenu ul li.menuopt{ margin:0 0 0 1px;}
#leftMenu ul li.selected{ width:160px; height:30px; display:block; background:url("../Imagenes/menubg-hover2.gif") 0 0 no-repeat #00818A; color:#00818A; text-align:center;}

donde #leftmenu es una capa contenedora.
A ver si me podeis echar una mano.

[Ruben_JD]

prueba con quitar los ul que estan demas:
ul {
list-style: none;
margin-left: -40px;
padding: 0;
}
#leftMenu{
width:160px;
height:300px;
position:absolute;
margin-left: 0px;
margin-top: 90px; }
#leftMenu li{
float:left;
font:12px/30px "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight:bold;
text-transform:uppercase;}
#leftMenu li a{
width:160px;
height:30px;
/*funciona bien en Firefox 2 con estsa 2 lineas*/
voice-family: "\"}\"";
voice-family: inherit;

display:block;
background-color: #FFFFFF;
color:#9A2E00;
text-decoration:none;
text-align:center;}
#leftMenu li a:hover{
background:/*url("../Imagenes/menubg-hover2.gif") 0 0 no-repeat*/ #00818A;
color:White;}
#leftMenu li.menuopt{
margin:0 0 0 1px;}
#leftMenu li.selected{
width:160px;
height:30px; display:block;
background:/*url("../Imagenes/menubg-hover2.gif") 0 0 no-repeat */#00818A;
color:Blue;
text-align:center;}

[Vice]

Los ul no están de más sino que esta manera de ponerlo indica que se tiene que cumplir esa estructura para que se apliquen los estilos. Tal como está empieza con el identificador #topMenu, que en mi caso es un div y aplica el estilo a la ul que está contenido y así sucesivamente.
Probé en margin-left: -40 y va bien con firefox, pero no con IE, que me hace desaparecer parte del texto por la izquierda.

Por otro lado, lo que vi es que el "list-style: none" hace desaparecer la viñeta, pero sigue utilizando el espadio que ocupa dicha viñeta. Esto, claro está, en el firefox, no en el IE, y es ese espacio donde está la diferencia.

[AlZuwaga]

creo que deberías probar con margin-left y padding-left de valor cero

[fearlex]

No creo que debas complicarte la existencia, en el caso especifico de los ul, firefox la da exactamente el margen que lleva. El que siempre esta en desacuerdo es el IE, este agregar un margen adicional y diferente, esto no lo puedes evitar, la forma mas facil de resolverlo es dejandolo como firefox te lo pocisiona mejor, y agregando comentarios condicionales condicionales con el margen que te acomode bien el ul para IE.

De todas formas estoy abierto a opiniones si alguien lo logra, pero hace un tiempo tuve el mismo problema con mi portfolio, y despues de mucho roperme la cabeza y preguntar, la solucion que obtuvimos fue esa.

Espero te sirva mi consejo.


Saludos

[tunait]

Buenas

El asunto es que el espacio que dejan a la izquierda por defecto las listas se visualizan igual en IE que en los demás pero sin embargo lo hace estableciendo el valor por defecto a distintas propiedades.

IE crea ese espacio aplicando un margin-left
FF lo hace aplicando un padding-left

Prueba a aplicar un padding-left a 0 a ver si lo soluciona

[Vice]

Gracias a todos por vuestra ayuda. Y para que lo sepais y lo tengais en cuenta, lo que me ha dicho tunait me ha dado la solución. Al final al ul le aplico este estilo:

#leftMenu ul { width:160px; margin-left: 0px; padding-left: 0px; font:12px/30px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; text-transform:uppercase; }

y se ve perfecto tanto en IE como en firefox.
Fijaros que uso tanto el padding-left como el margin-left a 0. Uno le hace caso el IE y otro le hace caso el firefox.

[AlZuwaga]

que tunait de acá, que tunait de allá... ¿lo que yo he dicho poco más de 2 horas antes que ella no ha servido de nada? Ah, claro, porque ella es más bonita que yo...

Por cierto, no me tomen en serio que estoy bromeando

[fearlex]

Iniciado por Al Zuwaga

que tunait de acá, que tunait de allá... ¿lo que yo he dicho poco más de 2 horas antes que ella no ha servido de nada? Ah, claro, porque ella es más bonita que yo...

Por cierto, no me tomen en serio que estoy bromeando

NO te pongas celoso Al, mejor pon una foto de Tunait, para que no dejes a muchos intrigados por aqui, ya que no somos todos los que hemos visto mas alla de su avatar.

Por cierto, tambien bromeo,


Y volviendo al tema, estoy me aclaro tremenda duda, ademas de un poco de codigo en mi web. Gracias una vez mas Tunait.

[Vice]

Iniciado por Al Zuwaga

que tunait de acá, que tunait de allá... ¿lo que yo he dicho poco más de 2 horas antes que ella no ha servido de nada? Ah, claro, porque ella es más bonita que yo...

Por cierto, no me tomen en serio que estoy bromeando

Ups, tienes que perdonarme pero es que no vi tu mensaje. Es tan escueto y directo que los dos más largos que hay después me lo han ocultado :(.

Nota: ni idea de que Tunait es una chica. XD