Problema list-style-image en IE

[oscar78]

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!

[ramm]

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

[polperb12]

yo tuve el mismo problema, lo solucioné con la sugerencia de Ramm

[anf]

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

[alexk]

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!

[anf]

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.

[jomaruro]

Hola chic@s:

¿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.

[alexk]

jomaruro jaja perdona no me fije... ajaja yo vi la respuesta de anf y pues segui perdona, no vuelve a ocurrir

[jomaruro]

Hola:

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

Saludos.