Problema compatibilità browser

[Ticio94]

In questa pagina(http://dimensioneacqua.altervista.org/flora.html) l'indice viene visualizzato in Internet Explorer erratamente. Infatti, il testo risulta attaccato e disallineato rispetto al marcatore(un'immagine). Come posso risolvere il problema ? Grazie in anticipo

[sandrone65]

Temo non ci sia nulla da fare, IE e Mozilla visualizzano differentemente la list-style-image.

[Ticio94]

Beh, ma ci sarà pure qualche modo per inserire una lista che venga visualizzata correttamente in tutti i browser.

[sandrone65]

Ce ne sono parecchi di modi... usando l'elenco puntato si potrebbe provare così:

HTML

<ul>[*][img]pixel_3.gif[/img]Voce 1[*][img]pixel_3.gif[/img]Voce 2[*][img]pixel_3.gif[/img]Voce 3[/list]

CSS

ul {list-style-type: none;}
li {position:relative;}
.elencoimg {  position:absolute; left:-34px;margin-top:4px;}

Mi sembra che funzioni

[Ticio94]

Grazie mille !!! Non ci avevo pensato ! Adesso sistemando qualche valore funziona perfettamente !

[fcaldera]

suggerimento: meglio spostare l'immagine del punto elenco come background dell'elemento[*] piuttosto che come immagine di primo piano (essendo un'immagine relativa allo stile e non al contenuto)

[sandrone65]

Originariamente inviato da fcaldera
suggerimento: meglio spostare l'immagine del punto elenco come background dell'elemento[*] piuttosto che come immagine di primo piano (essendo un'immagine relativa allo stile e non al contenuto)

Giustissimo.
Dopo aver smadonnato e non essere riuscito a risolvere con il list-style-image ho buttato giù l'esempio decisamente troppo di fretta

[Ticio94]

Originariamente inviato da fcaldera
suggerimento: meglio spostare l'immagine del punto elenco come background dell'elemento[*] piuttosto che come immagine di primo piano (essendo un'immagine relativa allo stile e non al contenuto)

Se si imposta come background dell'elemento[*] l'immagine usata come marcatore risulta come sfondo del testo! Infatti, l'elemento[*] comprende marcatore e contenuto.

[sandrone65]

Ovviamente risolvi con il padding:

ul { list-style-type: none;}
li {background:url(pixel_3.gif) left no-repeat;padding-left:35px;}

<ul>[*]Voce 1[*]Voce 2[*]Voce 3[/list]

[Ticio94]

Originariamente inviato da sandrone65
Ovviamente risolvi con il padding:

ul { list-style-type: none;}
li {background:url(pixel_3.gif) left no-repeat;padding-left:35px;}

<ul>[*]Voce 1[*]Voce 2[*]Voce 3[/list]

Ho provato, e come avevo detto, non viene visualizzato corettamente così.