problemi impaginazione menu

[recensito]

salve

sto impazzendo con l'impaginazione di un menu che si vede come dovrebbe su firefox ma ie mi da grossi problemi


questa è l'impostazione del menu


con questa codice

/*nav*/
#nav{
	clear:left;
	position:relative;
	background: url('../img/layout/share/bg_nav1.jpg') no-repeat center;
	margin:0;
	margin-top:10px;
	padding:0;
	height:89px;
}
#nav ul{	
	height:89px;
	width:817px;
	margin:0 auto;
	padding:0;
}
#nav li{
	float:left;
	margin:0;
	padding:0;
	line-height:89px;
	list-style:none;
	text-align:center;
}
#nav li.azienda{width:200px;}
#nav li.prodotti{width:200px;}
#nav li.news{width:203px;}
#nav li.contatti{width:203px;}

.grafL{
	background: url('../img/layout/share/grafL.png') no-repeat;
	*background:none;
	*filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod='image', src="http://affafa.netsons.org/polare/img/layout/share/grafL.png");
	padding:11px 0 20px 11px;
	margin:-11px;
	position:relative;
	z-index:100;	
}
.grafR{
	background: url('../img/layout/share/grafR.png') no-repeat;
	*background:none;
	*filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod='image', src="http://affafa.netsons.org/polare/img/layout/share/grafR.png");
	padding:12px 0 20px 11px;
	position:relative;
	z-index:100;
	margin-left:-11px;
}
#nav a{
	text-decoration:none;	
	font:1.3em Times New Roman;
	font-weight:bold;
	color:#583f2e;
	margin-top:11px;
	padding:1px  11px 0 ;	
	position:relative;
	z-index:102;
}
#nav a:hover,#nav a.select{	
	color:#fff;
	background:#a9811d;
}

<div id="nav">
	<ul>
		<li class="azienda"><span class="grafL"></span>AZIENDA<span class="grafR"></span>
		<li class="prodotti"><span class="grafL"></span>PRODOTTI<span class="grafR"></span>
		<li class="news"><span class="grafL"></span>NEWS ED EVENTI<span class="grafR"></span>
		<li class="contatti"><span class="grafL"></span>CONTATTI<span class="grafR"></span>
	[/list]
</div>

riesco a creare una lista con item a dimensione fissa (in moda da rispettare lo sfondo sotto e le barre di separazione delle voci) al cui interno inserisco 3 elementi in linea
1)graffa di apertura
2)il link
3)graffa di chiusura

su firefox benissimo
su ie gli elementi in linea nn mostrano immagini... devo per forza renderlo un blocco ma nn riesco a mantenere quella sistemazione

qualche suggerimento?

[gengix]

Prova con questo codice.
Nn è completo, nel senso che le larghezze le devi gestire a tuo piacimento e dai del margine o del padding per distanziare i listati.
In sostanza ho tirato via le larghezze ai li, trasformato gli span in elementi di blocco e altre piccole modifiche. Ho tirato via "*background: none" che nn capisco cosa ti serva a parte nn visualizzare l'immagine in IE, e ti ho lasciato i bordi per vedere la struttura. Ripeto la strada è questa, aggiustatelo te.

css:
#nav{
clear:left;
background: url('../img/layout/share/bg_nav1.jpg') no-repeat center;
margin:0 auto;
margin-top:10px;
padding:0;
height:89px;
border:solid 1px #000;
text-align:center;
}
#nav ul{
margin:0 auto;
height:89px;
width:900px;/*larghezza fiittizia*/
padding:0;
border:solid 1px #000;
}
#nav li{
float:left;
margin:0;
padding:0;
line-height:89px;
list-style:none;
text-align:center;
border:solid 1px #000;
}
.grafL{
display:block;
float:left;
width:30px;/*larghezza fittizia*/
background: url('../img/layout/share/grafL.png') no-repeat;
*filter: progidXImageTransform.Microsoft.AlphaImageLoader(e nabled=true, sizingMethod='image', src="http://affafa.netsons.org/polare/img/layout/share/grafL.png");
padding:11px 0 20px 11px;
z-index:100;
border:solid 1px #000;
}
.grafR{
display:block;
float:left;
width:30px;/*larghezza fittizia*/
background: url('../img/layout/share/grafL.png') no-repeat;
*filter: progidXImageTransform.Microsoft.AlphaImageLoader(e nabled=true, sizingMethod='image', src="http://affafa.netsons.org/polare/img/layout/share/grafR.png");
padding:12px 0 20px 11px;
position:relative;
z-index:100;
margin-left:-11px;
border:solid 1px #000;
}
#nav a{
display:block;
float:left;
text-decoration:none;
font:1.3em Times New Roman;
font-weight:bold;
color:#583f2e;
margin-top:11px;
padding:1px 11px 0 ;
position:relative;
z-index:102;
border:solid 1px #000;
}
#nav a:hover,#nav a.select{
color:#fff;
background:#a9811d;
border:solid 1px #000;
}

[recensito]

ottimo, grazie mille

il background:none mi serve per le png o continua a mostrarmi quella con lo sfondo celestino


mhh ora il problema + grande è la centratura

[gengix]

Nn penso sia un grosso problema la centratura..perchè che problemi hai?

[recensito]

devono stare al centro degli spazi delimitati dalle righine

con il left stanno per forza a sinistra
ora mis ono arrangiata con dei margini laterali ma sono sballati a seconda del browser che uso..su firefox ed opera centrai
ie nn centrato un pò laterale
safari nn ho visto ma dovrebbe essere come opera

[gengix]

prova allegare le immagini originali

[recensito]

sai che penso....che a questo punto potrei tagliare la testa al toro lasciando le graffe come parte dello sfondo...

[gengix]

nn è male come idea...avevo ipotizzato una soluzione del genere, il problema è che è poco dinamica, ma considerando che i tuoi titoli (ipotizzo) saranno sempre uguali fai bene a provare.