gestione ul li su firefox e IE7

[thenax]

ho il seguente css

#boxes_II { width : 492px; margin-left : 5px; } 
#boxes_II ul { padding-left: 15px; } 
#boxes_II ul li { padding-bottom: 5px; } 
#boxes_II ul.pubblicazioni li { list-style-type: none; } 
#boxes_II ul.pubblicazioni li:before { display: marker; content: url("images/pubblicazioni.gif"); vertical-align: -5px; padding-right: 5px; } 

ed il seguente codice php:
[*]
<span class="lista" style="position:absolute">
<a href="pubblicazione.php?pub=<?php echo
$row_pubblicazioni['idpubblicazione']; ?>"><?php echo
> $row_pubblicazioni['titolopubblicazione']; ?></a>
</span>


purtroppo l'elenco creato non visualizza la gif su ie7 ma solo su firefox inoltre il testo troppo lungo me lo posiziona su una riga unica e va a sovrapportsi quindi sul menu di destra
come posso fare?

il link è

[zave]

Ciao thenax.

Perchè il testo non sbordi devi dichiarare la larghezza dell' "ul".. o in generale del div che lo contiene..

Per le immagini delle liste io non uso mai li:before...

Prova a dare uno sfondo

#boxes_II ul.pubblicazioni li {
background: url(tua_img.gif) no-repeat 0px 0px;
padding-left: 10px; <----------- qui la dimensione dipende dall'immagine
}

[thenax]

ho provveduto ad inserire questo

#boxes_II ul.pubblicazioni li { list-style-type: none; }     
#boxes_II ul.pubblicazioni li { background: url(images/pubblicazioni.gif) no-repeat 0px 0px; padding-left: 21px; 
padding-bottom: 10px;<----------- qui la dimensione dipende dall'immagine
 padding--top: 10px; } 

pero' purtroppo il risultato non è quello sperato...infatti su firefox si comporta malissimo (righe sovrapposte) menter su ie7 si comporta bene
come posso fare?

[thenax]

Originariamente inviato da zave
Ciao thenax.

Perchè il testo non sbordi devi dichiarare la larghezza dell' "ul".. o in generale del div che lo contiene..

cioè con width ?? non funziona manco quello su ul!

[zave]

devi prima dargli la proprietà display:block

così potrai definire altezza e larghezza che vorrai

[thenax]

è stato sufficiente togliere lo span.

ho rivisto il codice ed ora si vede in maniera identica sia su firefox che su ie7, rimane sempre il PROBLEMA della centratura dell'immagine rispetto al testo...si puo' fare qualcosa?

#boxes_II {  width : 492px; margin-left : 5px; }
 #boxes_II ul { list-style-type:none; }  
#boxes_II ul li { padding-bottom: 12px; }  
#boxes_II ul.bollettini li { background: url(/images/bollettini.gif) no-repeat 0px 4px;  _background:url(/images/bollettini.gif) no-repeat 0px 6px;  min-height:0px;   _height:1;  padding-left: 25px; }  
#boxes_II ul.acrobat li { background: url(images/acrobat.gif) no-repeat 0px 4px;  _background:url(images/acrobat.gif) no-repeat 0px 6px;  min-height:0px;   _height:1;  padding-left: 25px; }  
#boxes_II ul.pubblicazioni li { background: url(images/pubblicazioni.gif) no-repeat 0px 4px;  _background:url(images/pubblicazioni.gif) no-repeat 0px 6px;  min-height:0px;   _height:1;  padding-left: 25px; }