Salve a tutti.

Ho un menù creato con una struttura del tipo

<ul>[*]
<a>link</a>[*]
....
....[/list]

I "li", normalmente, hanno come background un file chiamato "sinistra.gif" che, quando il mouse passa sopra, deve diventare "sinistra_evidenziato.gif". Inoltre all'interno dei "li" c'è del testo che deve esser distanziato di 12px dal bordo sinistro, di 6 dal bordo superiore e di 7 dal bordo inferiore. Per fare questo ho provato ad usare sia del margin (applicato al "a"), sia del padding(applicato al "li"), ma in entrambi i casi ho questo problema:

quando passo il mouse, "sinistra_selezionato.gif" parte nello stesso punto in cui inizia il testo, ovvero 12px a destra rispetto al bordo sinistro...e ovviamente ciò non deve succedere. Se provo a eliminare il padding o il margin lo sfondo si posiziona bene, ma le scritte lo seguono...come posso risolvere? Vi posto il pezzo di css usato


codice:
<style type="text/css">
		<!--
			.menu_sinistra{
				list-style:		none;
				margin-left:	0px;
			}
			.menu_sinistra li{
				margin-top:6px;
				width:			220px;
				height:			16px;
				background:		url(img/sito_img/sinistra.gif);
				border:			1px solid #ec008c;
				text-align:		left;
				padding-left:	12px;
			}
			.menu_sinistra li a{
				color:			#ffffff;
				text-transform:	uppercase;
				font-weight:	600;
				text-decoration:none;
				margin-top:		2px;
				margin-bottom:	4px;
			}
			.menu_sinistra li a:hover, .menu_sinistra li a:focus, .menu_sinistra li a:active{
				background:		url(img/sito_img/sinistra_evidenziato.gif);
				width:			206px;
				height:			16px;
				padding-left:	0;
				margin-top:		0;
				margin-bottom:	0;
				text-decoration:none;
				
			}
		-->
	</style>

...come vedete ho dovuto azzerare anche i margini superiore e inferiore, altrimenti restava dello spazio anche tra i margini superiore e inferiore e lo sfondo "sinistra_selezionato.gif"


non so più dove sbattere la testa


allego un'immagine del problema...i primi 2 box è come dovrebbe essere (così come si vede su chrome, tra l'altro), mentre gli altri 2 box è quel che succede su explorer





Edit: dimenticavo di dire che sono stato costretto, su explorer, a togliere il margin-left: -40px; applicato al "ul" che, su chrome, serviva a metterlo a filo con lo schermo...ho risolto con un condizionale, ma se c'è un modo per evitarlo ben venga