problema compatibilità tra ie 6 e 7

[deejayp]

salve ragazzi..
spero che mi possiate aiutare a risolvere questo problema..

In pratica ho realizzato un layout utilizzando come browser predefinito IE7

Nella home page ho una mappa e la zona BANDIERE in due livelli superiori (rispetto a tutto il resto) e rispettivamente 2 e 3.

Premetto che con Firefox 3.5, Opera 9.6, Safari 4.0, Chrome 2.0 si vedeva perfettamnete come IE7, ma quando sono andato a vedere con IE6 la pagina...la mappa e le bandiere delle lingue non venivano visualizzate dove dovevano essere.

Qui di seguito, vi riporto il CSS, come si vede con tuti i browser:

html {
overflow: auto;
}

BODY {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #fff;
text-decoration: none;
text-align: center;
margin: 0px auto;
padding : 0px; 
width : 100%; 
height : 100%;
background: #372427;
overflow: auto;
}



#contenitore {
width: 813px;
margin: 0px auto;
padding: 0px;
}


#top_logo {
float: left;
width: 813px;
height: 131px;
margin: 0px auto;
padding: 0px;
text-align: left;
background: url(../img/logo_top.png) no-repeat top left;
z-index: 1;
}



#mappa_home {
position: absolute;
width: 394px;
height: 378px;
background: url(../img/mappa.png) top center no-repeat;
margin-top: -1px;
margin-left: 393px;
z-index: 2;
}




#band_ing {
position: absolute;
width: 36px;
height: 35px;
margin-top: 130px;
margin-left: 730px;
z-index: 3;
}


#band_ita {
position: absolute;
width: 36px;
height: 35px;
margin-top: 175px;
margin-left: 730px;
z-index: 3;
}

e questo è il css che invece funziona con IE6 ma non IE7

html {
overflow: auto;
}

BODY {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #fff;
text-decoration: none;
text-align: center;
margin: 0px auto;
padding : 0px; 
width : 100%; 
height : 100%;
background: #372427;
overflow: auto;
}



#contenitore {
width: 813px;
margin: 0px auto;
padding: 0px;
}


#top_logo {
float: left;
width: 813px;
height: 131px;
margin: 0px auto;
padding: 0px;
text-align: left;
background: url(../img/logo_top.png) no-repeat top left;
z-index: 1;
}



#mappa_home {
position: absolute;
width: 394px;
height: 378px;
background: url(../img/mappa.png) top center no-repeat;
margin-top: -1px;
margin-left: -14px;
z-index: 2;
}


#band_ing {
position: absolute;
width: 36px;
height: 35px;
margin-top: 130px;
margin-left: 350px;
z-index: 3;
}


#band_ita {
position: absolute;
width: 36px;
height: 35px;
margin-top: 175px;
margin-left: 350px;
z-index: 3;
}

qui vi riporto il pezzo di codice nella pagina ..

<div id="contenitore">

<div id="mappa_home">
[img]img/mappa.png[/img]
</div>

<div id="band_ing">[img]img/band_eng.png[/img]</div><div id="band_ita">[img]img/band_ita.png[/img]</div>

<div align="center">

<div id="top_logo">
<div style="margin-left: 52px;">
[img]img/logo.jpg[/img]
</div>
</div>

...
...
...
...
</div>
</div>

mi potete dire dove è che sbaglio...!?!

[deejayp]

scusatemi..ma ho sbagliato a scrivere..

in quanto il problema di compatibilità non è tra ie 6 e 7 ...ma tra IE8 e le versioni precedenti di Explorer

[deejayp]

sperando che vi possa aiutare per capire il mio problema

Vi allego i due screenshoot

www.djptest.com/corretto.jpg

questo è la versione corretta ...che si vede con i browser che ho indicato in precedenza...


Invece quest'altro è quello che vedo se schiaccio il tasto presente su IE8 VISUALIZZAZIONE COMPATIBILITA'

www.djptest.com/errato.jpg