Foros del Web » Creando para Internet » CSS »

Problema con list-style de Imagen

Estas en el tema de Problema con list-style de Imagen en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 19/09/2007, 10:30
 
Fecha de Ingreso: mayo-2007
Mensajes: 10
Antigüedad: 10 años, 6 meses
Puntos: 1
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).




Alguien sabe como solucionar esto???


Muchas gracias.
  #2 (permalink)  
Antiguo 19/09/2007, 10:50
 
Fecha de Ingreso: febrero-2002
Ubicación: Sabadell
Mensajes: 253
Antigüedad: 15 años, 9 meses
Puntos: 5
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 :)
  #3 (permalink)  
Antiguo 19/09/2007, 11:13
Avatar de PatomaS
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: En alguna otra parte
Mensajes: 4.656
Antigüedad: 13 años, 9 meses
Puntos: 63
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:
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
__________________
¡ hey, hou, hou, hey !
  #4 (permalink)  
Antiguo 19/09/2007, 11:35
 
Fecha de Ingreso: mayo-2007
Mensajes: 10
Antigüedad: 10 años, 6 meses
Puntos: 1
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.
  #5 (permalink)  
Antiguo 19/09/2007, 12:49
Avatar de PatomaS
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: En alguna otra parte
Mensajes: 4.656
Antigüedad: 13 años, 9 meses
Puntos: 63
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
__________________
¡ hey, hou, hou, hey !
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

SíEste tema le ha gustado a 1 personas (incluyéndote)




La zona horaria es GMT -6. Ahora son las 12:35.