Newsgroup: it.comp.www.html
Titolo: menu orizzontale con CSS e offset con IE

Salve a tutti.
Da un pò di tempo mi è venuta la "standardite acuta" e sto 
ristrutturando un pò di siti opera mia sparsi per il web...
Ora, premesso che se i CSS fossero una donna me li sposerei, mi chiedo 
perché Dio abbia fatto proliferare Internet Explorer...?
E vabbè che se sei un designer/styler/webmaster/coder/debugger hai la 
gastrite (se non ce l'hai ti verrà presto) e mastichi Maalox come 
dietorelle... ma la pazienza ha un limite...
Mi spiego.
Scenario: menu orizzontale con i CSS, semplice ma efficace.
Con firefox tutto ok come il resto, con IE appena passo con il mouse su 
di una qualsiasi voce... zac! la pagina si sposta di un tot a sinistra...
Vi giuro che mi sono spulciato la rete fino al gopher, ma di sto 
comportamento non ho trovato soluzione...
Ho capito (e non ci vuole tanto) che dipende da a:hover, o meglio non si 
presenta l'offset se commento l' a:hover nel css, ma poi...?
Float, line-height, margini, padding, whitespace, display...le ho 
alchemicamente provate tutte...
Mi buttante un salvagente? Vi prego...
Allego xhtml e css per il menu e per la struttura della pagina 
(incompleti tranne il menu)
/*xhtml*/
<body>
<div id="contenitore">
<div id="intestazione">
	<div id="int-sx"></div>
	<div id="int-centro"></div>
	<div id="int-dx"></div>
</div>
<div id="logo-barranav">
	<div id="logo"><img src="logo.png" width="248" height="128" 
alt="logo"/></div>
	<div id="barranav">
		<ul class="navigazione"><li class="primaVoce"><a href="chisiamo.php" 
 >Chi siamo</a></li><li class="secondaVoce"><a 
href="">Prodotti</a></li><li class="terzaVoce"><a 
href="">Servizi</a></li><li class="quartaVoce"><a 
href="">Contatti</a></li><li class="quintaVoce"><a 
href="">News</a></li><li class="sestaVoce"><a href="">Links</a></li><li 
class="settimaVoce"><a href="">Percorsi</a></li></ul>
	</div>
</div>
<div id="corpo">
	<div id="corpo-sx"><h2>Chi siamo</h2><p> ...</p></div>
	<div id="corpo-centro"><h2>Prodotti</h2><p>...</p></div>
	<div id="corpo-dx"><h2>Servizi</h2><p>...</p></div>
</div>
<div id="extra">
	<div id="extra-sx"><h3>S</h3><p>...</p></div>
	<div id="extra-centro"><h3>I</h3><p>...</p></div>
	<div id="extra-dx"><h3>G</h3><p>...</p></div>
</div>
<div id="bottom">
	<div id="bottom-linea">&nbsp;</div>
	<div id="bottom-copy"><h6>...</h6></div>
	<div id="bottom-icon">&nbsp;</div>
</div>
</div>
</body>
/* CSS per la gestione e il comportamento della barra di navigazione 
orizzontale */
..navigazione {
margin:0;
padding:0.5em 0;
font-family:"Tw Cen MT", Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
text-align:right;
line-height:normal;
border-top:1px solid #FFF;
}
..navigazione li {
list-style:none;
display:inline;
}
..navigazione a {
height:0;
padding:0.5em 3px;
text-decoration:none;
margin:-0.5em 0;
border-right:1px solid #FFF;
white-space:nowrap;
}
..navigazione .primaVoce a {
border-left:1px solid #FFF;
}
..navigazione .settimaVoce a {
border-right:1px solid #000066;
}
..navigazione a:link,
..navigazione a:visited {
background:#000066;
color:#FFF;
}
..navigazione a:hover,
..navigazione a:focus,
..navigazione a:active {
background:#FFF;
color:#000;
}
/* CSS per il layout liquido a tre colonne */
/*====================================================== STRUTTURA E 
LAYOUT ====================================*/
body {
margin:0;
padding:0 15%;
background:#FFF;
color:#000;
font:80% verdana,Geneva,Arial,Helvetica,sans-serif;
}
#contenitore {
float:left;
width:100%;
}
#intestazione {
float:left;
width:100%;
height:40px;
background-image:url(sfondotop.png);
background-repeat:repeat-x;
overflow:hidden;
}
#int-sx {
float:left;
width:100px;
height:40px;
background-image:url(toputil.png);
background-repeat:no-repeat;
}
#int-centro {
float:left;
width:160px;
height:40px;
background-image:url(desideri.png);
background-repeat:no-repeat;
}
#int-dx {
float:right;
width:160px;
height:40px;
background-image:url(sogni.png);
background-repeat:no-repeat;
}
#logo-barranav {
clear:both;
float:left;
width:100%;
}
#img-logo {  /*ricordarsi di gestire le immagini proporzionali*/
}
#logo {
float:left;
width:30%;
height:128px;
}
#barranav {
float:right;
text-align:right;
height:auto;
}
#corpo {
clear:left;
float:left;
width:100%;
padding-top:10px;
}
#corpo-sx {
float:left;
width:30%;
}
#corpo-centro {
float:left;
width:30%;
padding-left:5%;
padding-right:5%;
}
#corpo-dx {
float:right;
width:30%;
}
#extra {
clear:left;
float:left;
width:100%;
padding-top:30px;
padding-bottom:20px
}
#extra-sx {
float:left;
width:30%;
height:122px;
}
#extra-centro {
float:left;
width:30%;
height:122px;
padding-left:5%;
padding-right:5%;
}
#extra-dx {
float:right;
width:30%;
height:122px;
}
#bottom {
clear:left;
float:left;
width:100%;
}
#bottom-linea {
height:6px;
padding-bottom:4px;
background-image:url(bottom.png);
background-repeat:repeat-x;
}
#bottom-copy {
float:left;
}
#bottom-icon {
float:right;
width:329px;
height:18px;
background-image:url(icon.png);
background-repeat:no-repeat;
}
/*============================================= TITOLI, PARAGRAFI, TESTO 
E LINK ===========================================*/
h1,h2,h3,h4,h5,h6 {
font-family:"Tw Cen MT", Verdana, Arial, Helvetica, sans-serif;
}
h2 {
font-size:18px;
font-weight:bold;
color:#666666;
border-bottom:2px solid #EEE;
}
#extra h3 {
font-size:14px;
font-weight:bold;
color:#666666;
width:100%;
}
h6 {
margin:0;
padding:0;
font-size:12px;
font-weight:bold;
color:#666666;
}
#corpo p {
margin:0;
padding:0;
font-family:"Tw Cen MT", Verdana, Arial, Helvetica, sans-serif;
font-size:100%;
font-weight:400;
color:#666666;
}
#extra p {
margin:0;
padding:0;
font-family:"Tw Cen MT", Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:400;
color:#000000;
}

Ho risolto con l'aiuto di un amico in rete così:
body {
margin:0;
padding:0;
background:#FFF;
color:#000;
font:80% verdana,Geneva,Arial,Helvetica,sans-serif;
text-align:center;
}
#contenitore {
width:80%;
margin:0 auto;
text-align:left;
}
e lo spiacevole effetto "offset" non c'è più ;)