[css] sovrapposizione errata dei div in explorer

[poscrittum]

non capisco come fare, su explorer ho il div menu che mi mangia il div middle che ha dei margini in alto negativi(per questioni di layout). Questo è il codice HTML:

<div id="menu">menu</div>
<div id="middle" style="height:375px;">
	<div id="sx">
		<div id="sxTitolo">Offerte Speciali</div>
		<div id="sxContent" style="height:325px;">Presto on line le migliori offerte per la famiglia</div>
	</div>
	<div id="dx">
		<div id="dxTitolo">Benvenuti all'Hotel</div>
		<div id="dxBody">
			<div class="dxContent">[img]img/1.jpg[/img]<p style="width:210px; float:left;">gestito direttamente dai proprietari, si trova sul lungomare della citt&agrave; , a 20 metri dalla spiaggia, lunghissima e di sabbia fine, e a pochi passi dal centro storico.

				Il ristorante  propone piatti gustosi,  tipiche pietanze tradizionali della nostra zona, deliziose specialit&agrave; di pesce dell’Adriatico e per chi desidera</p>
			</div>
			<div class="separatore"><hr style="width:75%;" noshade /></div>
			<div class="dxContent"><p style="width:210px; float:right;">un pasto leggero, un appetitoso buffet di verdure fresche e stuzzicanti piatti freddi.
Le 39 camere, di cui 24 con vista sul mare, dispongono tutte di servizi privati, balcone, telefono, televisione, cassaforte e del ventilatore a pale.

				Il posteggio auto interno è esclusivamente ad uso dei nostri graditi ospiti, gratuitamente.</p>[img]img/2.jpg[/img]</div>
		</div>
	</div>
</div>

Questo è il CSS:

#menu {
	height:38px; 
	z-index:0; 
	text-align:center; 
	background-position:bottom; 
	background-image:url(img/menu.gif); 
	background-repeat:no-repeat;
}

#middle {
	background-image:url(img/middle.gif); 
	padding:0 17px; 
	z-index:1;
}

#sx {
	float:left; width:152px; 
	background-image:url(img/sxBottom.gif); 
	background-position:bottom; 
	background-repeat:no-repeat; 
	margin-top:-5px; 
	padding-bottom:15px; 
	z-index:2;
}
#sxTitolo {
	background-image:url(img/sxTop.gif); 
	background-repeat:no-repeat; 
	height:26px; 
	text-align:center;
}
#sxContent {
	background-image:url(img/sxMiddle.gif); 
	padding:5px 10px;
}

#dx {
	float:right; 
	width:470px; 
	background-image:url(img/dxBottom.gif); 
	background-position:bottom; 
	background-repeat:no-repeat; 
	margin-top:-5px; 
	padding-bottom:15px; 
	z-index:2;
}
#dxTitolo {
	background-image:url(img/dxTop.gif); 
	background-repeat:no-repeat; 
	height:26px; 
	text-align:center;
}
#dxBody {
	background-image:url(img/dxMiddle.gif); 
	padding:5px 10px;
}
.dxContent {
	height:150px; 
	width:450px;
}
.separatore {
	padding:5px 0; 
	text-align:center;
}

C'è una soluzione o è una cosa impossibile di explorer? che poi lo avevo risolto ma ho continuato a sviluppare senza controllare e non so in che punto explorer non ha più capito come sovrapporre i div......

[seed_squall_it]

Quello degli z-index "sballati" è un bug di IE, anche se nel tuo caso ci sono diversi errori nel codice, quindi il problema non è imputabile direttamente al browser. Puoi eliminare le dichiarazioni di z-index nelle regole dei <div> #menu e #middle...non servono. z-index ha effetto solo quando un box è posizionato in modo relativo, fisso o assoluto...mentre quei box sono posizionati normalmente, ovvero in modo statico. Prova a impostare #middle con position: relative e z-index: 1 e ad eliminare z-index: 0 in #menu. In questo modo, #middle continuerà ad influire sul layout della pagina, come se fosse posizionato in modo statico, ma sarà su un "piano" superiore rispetto a #menu. Quindi, tutti i box che #middle contiene avranno z-index sempre più alto di tutti i box che sono eventualmente contenuti in #menu (e di #menu stesso).

Allo stesso modo, hai impostato z-index per i box contenuti nel <div> #middle, ma senza posizionarli. Se vuoi che lo z-index abbia effetto su di essi, devi per lo meno dichiararli position: relative.

Il valore 0 per z-index è quello di default di tutti i box non posizionati (ovvero posizionati in modo statico). Tuttavia per questi box non ha effetto impostare uno z-index diverso, proprio perché sono statici.