Foros del Web

Foros del Web (http://www.forosdelweb.com/)
-   CSS (http://www.forosdelweb.com/f53/)
-   -   Problema con <ul> y navegadores (http://www.forosdelweb.com/f53/problema-con-ul-navegadores-449178/)

Vice 11/12/2006 08:04

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.

Ruben_JD 11/12/2006 10:29

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

Vice 11/12/2006 14:41

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.

AlZuwaga 11/12/2006 14:44

Re: Problema con <ul> y navegadores
 
creo que deberías probar con margin-left y padding-left de valor cero

fearlex 11/12/2006 15:14

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

:arriba:

tunait 11/12/2006 16:52

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 :arriba:

Vice 13/12/2006 12:25

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.

AlZuwaga 13/12/2006 12:40

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 :-D

fearlex 13/12/2006 12:45

Re: Problema con <ul> y navegadores
 
Cita:

Iniciado por Al Zuwaga (Mensaje 1819502)
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 :-D

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. :arriba:

Vice 14/12/2006 01:24

Re: Problema con <ul> y navegadores
 
Cita:

Iniciado por Al Zuwaga (Mensaje 1819502)
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 :-D

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


La zona horaria es GMT -6. Ahora son las 07:50.

Desarrollado por vBulletin® Versión 3.8.7
Derechos de Autor ©2000 - 2026, Jelsoft Enterprises Ltd.