Problema con list-style

[Jigulina]

Ragazzi sto realizzando un menu, in cui utilizzo list-type-image, il problema è uno: che se visualizzato con Google Chrome va bene, con Firefox l'immagine di list-type-image viene messa in automatico come sfondo, e quindi il testo va sopra e non si vede nulla e infine con IE8, l'iimagine viene messa in automatico sopra, mentre il testo viene messo giu: Perchè come faccio?
Ecoo il codice Css:

ul {
       margin: 0;
       padding: 0;
       list-style-type: none;
}
 
.home {
	float: left;
	list-style-image:url(home.png);
        list-style-position: inside;
}
.video {
	float: left;
	list-style-image:url(video.png);
	list-style-position: inside;
}
.amici {
	float: left;
	list-style-image:url(amici.png);
	list-style-position: inside;
}
.menu_contenitore a {
       display: block;
       overflow: hidden;
       width: 193px;
       height: 19px;
	   color: #aa9989;
	   padding: 3px;
	   text-decoration: none;
	   text-align: left;
	   font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
       font-size: 13px;
       font-weight: normal;
}
.menu_contenitore a:hover {
	background-color: #ece5de;
	color: #806d5b;
	font-weight: bold;
	border-top: 1px solid #b5a799;
	border-left: 1px solid #b5a799;
	border-bottom: 1px solid #b5a799;
}

Codice Html :

 <div class="menu_contenitore">
<ul>
<li class="home">Home
<li class="video">Prova
<li class="amici">Prova2[/list]
</div>

Grazie in anticipo per le risposte!

[Prill]

Ciao Jigulina, potresti anche passare l'immagine direttamente come sfondo del link:

ul {
       margin: 0;
       padding: 0;
       list-style-type: none;
}
li {
	   display:block;
	   float:left;
	   width:200px;
} 

a.home, a.video, a.amici {
       display: block;
       color: #aa9989;
	   padding:3px 3px 3px 25px; /* da regolare il padding sinistro in base alla larghezza dell'immagine */
	   text-decoration: none;
	   text-align: left;
font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
       font-size: 13px;
       font-weight: normal;
	   background-repeat:no-repeat;
	   background-position:left center;
	   
}
a.home {
	background-image:url(home.png);
}
a.video {
	background-image:url(video.png);
}
a.amici {
	background-image:url(amici.png);
}
a.home:hover, a.video:hover, a.amici:hover {
	background-color: #ece5de;
	color: #806d5b;
	font-weight: bold;
	border-top: 1px solid #b5a799;
	border-left: 1px solid #b5a799;
	border-bottom: 1px solid #b5a799;
}

[Jigulina]

ma se io non volessi usare il background ma voglio utilizzare list-style-image perchè non va??

[Prill]

il list-style-image non è gestito allo stesso modo da tutti i browser, l'uso di un'immagine di sfondo elimina rischi di visualizzazioni non gradite, lo sfondo poi puoi darlo tanto alla voce elenco che al link, dipende da come conviene di più

[Jigulina]

ok ma con background il testo va sopra l'immagine..

[Prill]

Impostando il padding sinistro in base alla larghezza dell'immagine il testo risulterà affiancato all'immagine e non su di essa

[Jigulina]

Si ok funziona grazieee milleeeee!!!

[Jigulina]

Si ok funziona grazieee milleeeee!!!