Problema con list-style de Imagen

wiinigo · #1 (**permalink**) 19/09/2007, 09:30

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

Alguien sabe como solucionar esto???

Muchas gracias.

LoBo2024 · #2 (**permalink**) 19/09/2007, 09:50

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

PatomaS · #3 (**permalink**) 19/09/2007, 10:13

Hola

Bueno, hay una solución, no es semántica, pero es efectiva:

Código HTML:

li {
	background-image: url(imagen.gif);
	background-repeat: no-repeat; padding-left: 100px;
}

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

wiinigo · #4 (**permalink**) 19/09/2007, 10:35

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.

PatomaS · #5 (**permalink**) 19/09/2007, 11:49

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