IE6 non conforme

[S1MoN3]

Ciao a tutti, scusate se vi assillo con problemi che per voi a causa della vostra esperienza sapete risolvere da soli.
Mi trovo a creare un sito, ho fatto tutto il layout con i posizionamenti.
Nessun problema fin qui.
Firefox e IE7 lo visualizzano alla perfezione, mentre IE6 e precedenti mi danno uno strano risultato.
CSS:

/*Inizio Menù+Contenuti*/

#contenuto {
width: 900px;
margin: 0 auto;
background-image: url(../interfaccia/sfondo.jpg);
}

#menusxup {
width: 200px;
height: 17px;
float: left;
margin-left: 10px;
background-image: url(../interfaccia/upmenu.jpg);
}

#menudxup {
width: 200px;
height: 17px;
float: right;
margin-right: 10px;
background-image: url(../interfaccia/upmenu.jpg);
}

#contentup {
width: 900px;
height: 17px;
background-image: url(../interfaccia/contentup.jpg);
}

#menusx {
width: 200px;
height: 100%;
float: left;
margin-left: 10px;
background-color: #000000;
z-index: 1;
}

#menudx {
width: 200px;
float: right;
margin-right: 10px;
background-color: #000000;
z-index: 1;
}

#content {
width: 440px;
margin-left: auto;
margin-right: auto;
z-index: 2;
}

/*Fine Menù+Contenuti*/

/*Inizio Footer*/

#contentdown {
width: 900px;
height: 27px;
margin: 0 auto;
background-image: url(../interfaccia/contentdown.jpg);
clear: both;
}

/*Fine Footer*/

Questo è il css in questione.

XHTML:

<div id="contentup">
</div>
<div id="menusx">
[img]tasticategorie/tastoag.jpg[/img]
</div>
<div id="menudx">
</div>
<div id="content">
<h1>Lorem Ipsum</h1>
<h2>Dolor sit amet.</h2>


Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et

dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita

kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur

sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est

Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor

invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et

ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat

nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue

duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<div id="contentdown">
</div>
</div>

Questo è il pezzo di codice...
Allego il risultato che mi viene fuori con IE6...
Aiutatemi per favore

[S1MoN3]

Up...

[thomas_anderson]

ciao!
in primis, sfatiamo un mito: quando si ha a che fare con i bug dei browser spesso anche l'esperienza non basta. nel tuo layout vedo che hai usato lo z-index. lo z-index serve solo se gli elementi sono posizionati in modo relativo o assoluto. qui tu hai usato il float, quindi z-index non serve. ancora: quando usi il float, devi sempre specificare i margini, tutti e 4 e non solo uno. se ne specifichi solo uno, i browser calcolano gli altri in modo diverso. quindi se hai dati un margino destro di 10px e vuoi che gli altri siano 0, devi scrivere:

elemento {
float: right;
width: 200px;
margin: 0 10px 0 0;
}

IE6 calcola i margini automatici dei float in modo diverso. per lui un margine superiore non specificato è sempre diverso da 0.

[S1MoN3]

Originariamente inviato da thomas_anderson
ciao!
in primis, sfatiamo un mito: quando si ha a che fare con i bug dei browser spesso anche l'esperienza non basta. nel tuo layout vedo che hai usato lo z-index. lo z-index serve solo se gli elementi sono posizionati in modo relativo o assoluto. qui tu hai usato il float, quindi z-index non serve. ancora: quando usi il float, devi sempre specificare i margini, tutti e 4 e non solo uno. se ne specifichi solo uno, i browser calcolano gli altri in modo diverso. quindi se hai dati un margino destro di 10px e vuoi che gli altri siano 0, devi scrivere:

elemento {
float: right;
width: 200px;
margin: 0 10px 0 0;
}

IE6 calcola i margini automatici dei float in modo diverso. per lui un margine superiore non specificato è sempre diverso da 0.

Ciao, grazie per avermi risposto, ho messo i margini come tu mi hai elencato, ma, purtroppo IE6 mi continua a restituire lo stesso errore.... :S

[S1MoN3]

Ho mucinato per bene il codice mi sono accorto che era presente il bug che fa raddoppiare i margini dei float, l'ho corretto ma rimane ora solo il problema del filetto superiore...come potrei procedere?

[S1MoN3]

Scrivo la soluzione al problema per chi, bene o male, ne avesse bisogno...
Impostare display: inline; dove c'è il float con i margini, in modo che IE non cada nel suo bug e visualizzi correttamente i margini, poi, la questione del filetto indesiderato è stata una svista, ho dimenticato di inserire il no-repeat...

Ringrazione coloro che mi hanno aiutato, potete chiudere la discussione!

Grazie