Problema con list-style de Imagen
 

Hola,
Tengo un problema al introducir imágenes en las listas.
En Firefox lo hace bien, pero en el explorer le pone un margen por la izquierda a la imagen (queda como su fuera un sangrado de párrafo) y además pega la imagen al texto de la lista.

El código del li es el siguiente:

li {
FONT: bold 13px Tahoma, Verdana, Arial, Helvetica;
list-style-image: url(pagina.gif);
}


En Firefox me coloca bien la imagen, pero el explorer (tanto en el 6 como en el 7) me lo pone movido (como aparece en el ejemplo).

http://194.30.32.20/errorLi.gif


Alguien sabe como solucionar esto???


Muchas gracias.

Re: Problema con list-style de Imagen
 

Creo que la única manera que hay es poner tu mismo esa imagen delante del texto... yo me estuve peleando y al final acabe haciendolo así poniendo yo mismo la imagen delante del texto del li... aunque bueno puede que alguien sepa como arreglarlo y te de una solución mejor :)

Ejemplo: Simulación del list-style-image compatible con explorer, firefox y demás
 

Hola

Bueno, hay una solución, no es semántica, pero es efectiva:
Obviamente el padding que has de dejar se corresponde con la dimensión horizontal de la imagen más el espacio que desees entre ella y el texto.

Felicidad

Re: Problema con list-style de Imagen
 

Alguna de mis páginas tienen su propio background con lo que esto me lo complicaría.

No existe una solución para el propio list-style-image, sin tener que hacer el "truco" del background?

Saludos.

Re: Problema con list-style de Imagen
 

Hola

No conozco ninguna solución directa que funcione en todos los navegadores.

El background de la imagen no afecta a los otros fondos que hayas usado, cada uno es independiente.

Deberías hacer la prueba y si algo te da problemas, te recomiendo que a la capa con la lista le asignes un z-index superior al fondo de la página.

Felicidad