Foros del Web » Creando para Internet » CSS »

Problema con <ul> y navegadores

Estas en el tema de Problema con <ul> y navegadores en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 11/12/2006, 08:04
Avatar de Vice  
Fecha de Ingreso: agosto-2003
Mensajes: 613
Antigüedad: 14 años, 4 meses
Puntos: 2
Problema con <ul> y navegadores

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.
__________________
Estoy contagiado de Generación-I
  #2 (permalink)  
Antiguo 11/12/2006, 10:29
Avatar de Ruben_JD  
Fecha de Ingreso: diciembre-2003
Ubicación: Quito-Ecuador
Mensajes: 218
Antigüedad: 14 años
Puntos: 7
Re: Problema con <ul> y navegadores

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;}
__________________
RubénJ. Regresando al foro despues de un par de años. A preguntar más de las novedades del foro.
  #3 (permalink)  
Antiguo 11/12/2006, 14:41
Avatar de Vice  
Fecha de Ingreso: agosto-2003
Mensajes: 613
Antigüedad: 14 años, 4 meses
Puntos: 2
Re: Problema con <ul> y navegadores

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.
__________________
Estoy contagiado de Generación-I
  #4 (permalink)  
Antiguo 11/12/2006, 14:44
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
Re: Problema con <ul> y navegadores

creo que deberías probar con margin-left y padding-left de valor cero
__________________
...___...
  #5 (permalink)  
Antiguo 11/12/2006, 15:14
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 14 años, 2 meses
Puntos: 5
Re: Problema con <ul> y navegadores

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

__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
  #6 (permalink)  
Antiguo 11/12/2006, 16:52
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
Re: Problema con <ul> y navegadores

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
  #7 (permalink)  
Antiguo 13/12/2006, 12:25
Avatar de Vice  
Fecha de Ingreso: agosto-2003
Mensajes: 613
Antigüedad: 14 años, 4 meses
Puntos: 2
De acuerdo Re: Problema con <ul> y navegadores

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:
Cita:
#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.
__________________
Estoy contagiado de Generación-I
  #8 (permalink)  
Antiguo 13/12/2006, 12:40
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
Re: Problema con <ul> y navegadores

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
__________________
...___...
  #9 (permalink)  
Antiguo 13/12/2006, 12:45
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 14 años, 2 meses
Puntos: 5
Re: Problema con <ul> y navegadores

Cita:
Iniciado por Al Zuwaga Ver Mensaje
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.
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
  #10 (permalink)  
Antiguo 14/12/2006, 01:24
Avatar de Vice  
Fecha de Ingreso: agosto-2003
Mensajes: 613
Antigüedad: 14 años, 4 meses
Puntos: 2
Re: Problema con <ul> y navegadores

Cita:
Iniciado por Al Zuwaga Ver Mensaje
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
__________________
Estoy contagiado de Generación-I
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 08:18.