Foros del Web » Creando para Internet » CSS »

Problema list-style-image en IE

Estas en el tema de Problema list-style-image en IE en el foro de CSS en Foros del Web. Hola, Tengo un problema curioso con Internet Explorer. Resulta que hice unos listados Código HTML: <ul> <li> Item 01 </li> <li> Item 02 </li> <li> ...
  #1 (permalink)  
Antiguo 20/07/2005, 06:38
 
Fecha de Ingreso: mayo-2005
Mensajes: 26
Antigüedad: 12 años, 7 meses
Puntos: 0
Problema list-style-image en IE

Hola,

Tengo un problema curioso con Internet Explorer.

Resulta que hice unos listados
Código HTML:
<ul>
<li>Item 01</li>
<li>Item 02</li>
<li>Item 03</li>
</ul> 
y asigne un iconito a cada item así:
Código HTML:
	list-style-image: url(iconito.gif);
Todo funciona bien, pero en IE, al pasar por algun enlace los iconitos de algunas listas desaparecen.

Saben ustedes que razón puede haber?

Gracias!
  #2 (permalink)  
Antiguo 20/07/2005, 13:42
Avatar de ramm  
Fecha de Ingreso: junio-2004
Ubicación: Guadalajara
Mensajes: 207
Antigüedad: 13 años, 5 meses
Puntos: 0
La razon..pues no se, quizas acabas de descubrir un nuevo bug de IE.

Prueba lo siguiente:
Código:
ul {
list-style-type:none;
}
ul li a {
padding-left:20px;//el tamaño del iconito
background-image:url(iconito.gif);
background-repeat:no-repeat;
}
/*Y puedes agregar interactividad*/
ul li a:hover {
background-image:url(iconito2.gif);
}
Con eso logras un efecto mejor :)
  #3 (permalink)  
Antiguo 28/02/2008, 11:42
 
Fecha de Ingreso: noviembre-2007
Mensajes: 51
Antigüedad: 10 años
Puntos: 2
Re: Problema list-style-image en IE

yo tuve el mismo problema, lo solucioné con la sugerencia de Ramm
  #4 (permalink)  
Antiguo 14/07/2009, 20:33
Avatar de anf
anf
 
Fecha de Ingreso: junio-2009
Mensajes: 30
Antigüedad: 8 años, 5 meses
Puntos: 4
Desacuerdo Respuesta: Problema list-style-image en IE

El problema está, como casi siempre, en la mala interpretación de Internet Explorer, ¿por que? muy sencillo:

Código:
ul li:hover { list-style-image: url(img/arrow.png); }
Aquí estamos definiendo la propiedad de li con una imagen a su izquierda personalizada, en vez del punto por defecto.

Según las normas de w3c estamos cambiando la propiedad al tag correcto 'li', sin embargo esto, a pesar de funcionar perfectamente en todos los navegadores (Chrome, Firefox, Safari y Opera entre otros), no funciona en nuestro fantástico IE, ¿por que? por que si tienes un vínculo dentro de ese elemento 'li' este solamente funcionará si haces:

Código:
ul li a:hover { list-style-image: url(img/arrow.png); }
Asignando una propiedad no válida al tag 'a' (en este caso), curiosamente esto no funciona en los demás navegadores, solo en Internet Explorer, por lo que se demuestra una vez mas que si haces las cosas mal, donde tienen que funcionar bien no lo harán, caso contrario de IE, que funciona todo bien cuanto mas mal lo hagas.

Para solucionarlo tendrás que poner los 2 métodos para que los usuarios del malísimo IE puedan ver la imagen personalizada, no hay otra:

Código:
ul li:hover, ul li a:hover {
	list-style-image: url(img/arrow.png);
}
Saludos
  #5 (permalink)  
Antiguo 14/07/2009, 21:52
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Problema list-style-image en IE

exacto anf pero es mas sencillo como dice "ramm" ya que el espacio que dejan los navegadores de la viñeta al enlace varia no por mucho pero si lo hace... y ademas "list-style-image" es para las listas y en tu ultimo ejemplo le dariamos viñeta a 2 elementos? ("li" y "a")... por que ok... en IE6 no hay "li:hover" pero en FF hay las 2 opciones asi que creo que es mas sencillo como dice "ramm" y se vera igual en todo navegador... pero bueno es mi opinion gracias por la explicacion anf chao y suerte!
  #6 (permalink)  
Antiguo 15/07/2009, 06:00
Avatar de anf
anf
 
Fecha de Ingreso: junio-2009
Mensajes: 30
Antigüedad: 8 años, 5 meses
Puntos: 4
De acuerdo Respuesta: Problema list-style-image en IE

Para eso le das padding-left: Xpx, en firefox (como debe ser) solo sale 1 vez si usas ul li:hover, de hecho si quitas ul li:hover y dejas ul li a:hover ya no sale tu imagen personalizada, por lo menos en FF3.5.

Es mucho más sencillo dar simplemente un padding-left (2 palabras de código) y usar el método list-style-image que obviarle y utilizar otro como si se tratase de una triquiñuela, si dejamos de utilizar algunas propiedades por que no se adaptan a nuestras necesidades (o como es el caso, no queremos adaptarlas) entonces apaga y vamonos.

Sobretodo cuando tanto para un método como para otro estas utilizando el padding-left, si puedes ahorrarte código, hazlo siempre.

Para gustos los colores, yo solo dí la explicación exacta de por que ocurre, no la solución al problema ya que hay varias maneras de hacer lo mismo o en apariencia muy similar.

Espero que con esto entiendas mi punto de vista, recibe un cordial saludo.
  #7 (permalink)  
Antiguo 15/07/2009, 17:05
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Problema list-style-image en IE

Hola [email protected]:

¿Os habeis dado cuenta de que el mensaje original es de 2005? Lo más probable es que ya hayan resuelto su duda en su día ¿no?

Saludos.

  #8 (permalink)  
Antiguo 15/07/2009, 17:13
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Problema list-style-image en IE

jomaruro jaja perdona no me fije... ajaja yo vi la respuesta de anf y pues segui perdona, no vuelve a ocurrir
  #9 (permalink)  
Antiguo 15/07/2009, 17:19
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Problema list-style-image en IE

Hola:

Solo os lo indiqué para que os fijarais, no tienes porqué pedirme perdón.

Saludos.

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 16:59.