Incompatibilità CSS con IE6

[Fxyz4ever]

Salve a tutti,

il mio sito http://www.i-mob.it/ ha un css che non viene visto bene su Internet Explorer 6.

Ad esempio per centrare il sito uso questo codice qui:

#container { 	
    margin: 0 auto; 	
    width: 760px; 	
    position: relative; 
}

Su firefox e su IE7 viene visualizzato normalmente, mentre su IE6 sta tutto a sinistra.

Inoltre l'immagine (della stessa larghezza della div "container") che ho messo sotto il menù orizzontale per avere l'effetto del bordo arrotondato non coincide con lo sfondo grigio ma sembra più lungo di esso... creando un brutto effetto...

<div id="container">
[...]
    <div id="content">
	[img]images/bgTop.gif[/img]

#container { 	
    margin: 0 auto; 	
    width: 760px; 	
    position: relative; 
}
 
body {
	font-size: 80%;
	color: #009900;
	background: url(images/white.gif);
	font-family : "Trebuchet MS";
}

Posto qui lo screenshot di IE6:


E qui lo screenshot di firefox:


Inoltre sembra che ie6 non gestisca bene le "gerarchie" (non so se si dice così) delle definizioni css, oppure che non riconosca le definizioni css con "discendenti"

a {
	color: #00FF00;
	text-decoration: underline;
}

a:hover, a:visited {
	color: #FF0000;
}
.nav a {
	display: block;
	line-height: 40px;
	text-align: center;
	text-decoration: none;
	background: url("images/tab.gif") no-repeat center;
	color: #C0C0C0;
	font-variant: small-caps;
	font-weight: bold;
}

Su firefox i link sul menù orizzontale sono tutti grigi, poiché essendo i link discendenti della classe "nav", seguono la regola in basso, più restrittiva, del ".nav a".
Mentre su IE6 i link visitati sul menù sono rossi, perché seguono la prima regola, quella generale, di "a:hover".
Quindi da ciò deduco che IE6 o non gestisce bene le gerarchie (ritengo ciò improbabile) oppure più probabilmente non riconosce i discendenti, come in questo ".nav a".

Questa è la lunga carrellata di errori di visualizzazione di IE6...
Ma poi c'è l'errore più grave...
In questa pagina http://www.i-mob.it/contact.asp ho un errore clamoroso!
Lì ho un layout a due colonne, ottenuto usando le proprietà "float: left" e "float: right" delle div

<div id="content">
		[...]
		<h2>Centri Assistenza I-MOB</h2>
		<div class="sinistra">
			<iframe [...]> (link google maps)
			


				Punto 1 - Roma Manzoni

				[...]
			</p>	
		</div>
		<div class="destra">
			<iframe> (altra mappa google maps)
			


				Punto 2 - Roma Centocelle

				[...]
			</p>			
		</div>
		<div class="intero">
			[...]
			Email assistenza: [...]
			Direttori Generali [...]
		</div>
		<div class="sinistra">
			<div>
				Responsabile Punto 1

				[...]
			</div>
		</div>
		<div class="destra">
			<div>
				Responsabile Punto 2

				[...]
			</div>
		</div>

.sinistra {
	width: 50%;
	float: left;
}
.destra {
	width: 50%; 
	float: right;
}
.intero {
	width: 100%; 
	clear: both;
}

.sinistra>p, .destra>p, .intero>p, .sinistra>div, .destra>div, .intero>div, .sinistra>small, .destra>small {
	margin-left: 40px;
}

Su IE6 tutti i div "sinistra" e "destra", cioè con "float: left" e "float:right" non si vedono proprio!!! Ma si vedono degli spazi vuoti... Mentre vengono visualizzate normalmente le div "intero" con la proprietà "clear: both".
Per non parlare delle definizioni con child (tipo .sinistra>p) che vengono completamente ignorate... quindi niente margini...

Screenshots IE6:



Mentre su Firefox si vede così:



Quest'ultima "incompatibilità" mi costa caro!!! Il 10% degli utenti che usano IE6 per visitare il mio sito non vedono né la mappa, né gli indirizzi dei centri assistenza, né i modi per contattare i direttori dell'azienda! E quindi la pagina "Contatti" diventa praticamente inutile...

Qualche genio del webdesign può aiutarmi a trovare delle soluzioni cross browser? (A parte usare layout a tabella? )
Finora l'unico rimedio che ho usato è mettere la dicitura "Optimised for 800 x 600 and higher, Internet Explorer 7 and higher, Mozilla Firefox 2 and higher" nel footer...

Questa è la pagina del mio css: http://www.i-mob.it/i-mob.css
OT: qualsiasi critica/suggerimento in generale alla grafica/usabilità del sito sono ben accette!

Grazie a tutti per il vostro prezioso aiuto e scusate se vi ho annoiato col mio post lungo!

P.S. Internet Explorer 6 sucks!!!

[Prill]

Rispondo sui primi due problemi. Innanzitutto l'esatto ordine delle pseudoclassi per evitare problemi è link, visited e hover, quindi:

a:visited, a:hover  {
	color: #ff0000;
}

poi quando si definisce nel css direttamente un elemento, "a" nel tuo caso, e si vogliano invece impostare proprietà diverse su altre classi applicate a quel tag, esse andranno sempre specificate per evitare guai, se vuoi per hover un colore diverso sui link nel contenitore "nav" devi indicarlo.
Riguardo all'allineamento centrato, le vecchie versioni di ie non riconoscono il margin:auto ed è perciò necessario un text-align-center su body