Retroceder   Foros del Web > Diseño de Sitios web > CSS

Respuesta
 
Herramientas Desplegado
Antiguo 11-dic-2006, 07:04   #1 (permalink)
Vice está en el buen camino
 
Avatar de Vice
 
Fecha de Ingreso: agosto-2003
Mensajes: 613
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
Vice está desconectado   Responder Citando
Antiguo 11-dic-2006, 09:29   #2 (permalink)
Ruben_JD está en el buen camino
 
Avatar de Ruben_JD
 
Fecha de Ingreso: diciembre-2003
Ubicación: Quito-Ecuador
Mensajes: 95
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.
Ruben_JD está desconectado   Responder Citando
Antiguo 11-dic-2006, 13:41   #3 (permalink)
Vice está en el buen camino
 
Avatar de Vice
 
Fecha de Ingreso: agosto-2003
Mensajes: 613
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
Vice está desconectado   Responder Citando
Antiguo 11-dic-2006, 13:44   #4 (permalink)
Moderador
Al Zuwaga es realmente agradableAl Zuwaga es realmente agradableAl Zuwaga es realmente agradableAl Zuwaga es realmente agradableAl Zuwaga es realmente agradableAl Zuwaga es realmente agradable
 
Avatar de Al Zuwaga
 
Fecha de Ingreso: noviembre-2002
Ubicación: 34.517 S, 58.500 O
Mensajes: 12.344
Re: Problema con <ul> y navegadores

creo que deberías probar con margin-left y padding-left de valor cero
__________________
···---···
Al Zuwaga está desconectado   Responder Citando
Antiguo 11-dic-2006, 14:14   #5 (permalink)
fearlex tiene algunos puntos positivos de karma
 
Avatar de fearlex
 
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.048
Enviar un mensaje por AIM a fearlex Enviar un mensaje por MSN a fearlex Enviar un mensaje por Yahoo  a fearlex Enviar un mensaje por Skype™ a fearlex
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
fearlex está desconectado   Responder Citando
Antiguo 11-dic-2006, 15:52   #6 (permalink)
Moderadora
tunait es realmente agradabletunait es realmente agradabletunait es realmente agradabletunait es realmente agradabletunait es realmente agradabletunait es realmente agradable
 
Avatar de tunait
 
Fecha de Ingreso: noviembre-2002
Ubicación: Terok Nor
Mensajes: 14.914
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
tunait está desconectado   Responder Citando
Antiguo 13-dic-2006, 11:25   #7 (permalink)
Vice está en el buen camino
 
Avatar de Vice
 
Fecha de Ingreso: agosto-2003
Mensajes: 613
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
Vice está desconectado   Responder Citando
Antiguo 13-dic-2006, 11:40   #8 (permalink)
Moderador
Al Zuwaga es realmente agradableAl Zuwaga es realmente agradableAl Zuwaga es realmente agradableAl Zuwaga es realmente agradableAl Zuwaga es realmente agradableAl Zuwaga es realmente agradable
 
Avatar de Al Zuwaga
 
Fecha de Ingreso: noviembre-2002
Ubicación: 34.517 S, 58.500 O
Mensajes: 12.344
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
__________________
···---···
Al Zuwaga está desconectado   Responder Citando
Antiguo 13-dic-2006, 11:45   #9 (permalink)
fearlex tiene algunos puntos positivos de karma
 
Avatar de fearlex
 
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.048
Enviar un mensaje por AIM a fearlex Enviar un mensaje por MSN a fearlex Enviar un mensaje por Yahoo  a fearlex Enviar un mensaje por Skype™ a fearlex
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
fearlex está desconectado   Responder Citando
Antiguo 14-dic-2006, 00:24   #10 (permalink)
Vice está en el buen camino
 
Avatar de Vice
 
Fecha de Ingreso: agosto-2003
Mensajes: 613
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
Vice está desconectado   Responder Citando
Respuesta

No hay votos aún.


Herramientas
Desplegado

Normas de Publicación
No puedes crear nuevos temas
No puedes responder temas
No puedes subir archivos adjuntos
No puedes editar tus mensajes

BB code is Activado
Caritas están Activado
[IMG] está Activado
Código HTML está Desactivado


La Zona horaria es GMT -6. Ahora son las 23:35.


Message Board Statistics

LinkBacks Enabled by vBSEO 3.1.0

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93