Problema con i div su IE

fabioperez

Problema con i div su IE

Ciao a tutti,
sto realizzando un nuovo sito, e ho creato una pagina con i div per calcolare gli spazi e avere un test di resa online.
Mentre su firefox e altri browser la pagina viene visualizzata correttamente, appare alterata aprendola con Internet Explorer.
Nello specifico la parte centrale, il div "contenitore", ha al suo interno altri 3 div, due colonne laterali e lo spazio centrale "testo". Ho assegnato float left e right alle due colonne, e allineato al centro il div di mezzo. Quest'ultimo però con IE appare spostato.

Vi posto il codice html:
[HTML]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

body {font-family: verdana, sans-serif;}

#wrapper {position:relative;
width:990px;
margin-right:auto;
margin-left:auto;
}

#header {position:relative;
width:980px;
height:240px;
background-color:#0000ff;
margin-right:auto; margin-left:auto;
margin-top:10px;
}

#menu {position:absolute;
width:980px; height:50px;
bottom:0px;
background-color:#ff0000;
}

#contenuto {position:relative;
width:980px;
background-color:#008800;
margin-right:auto; margin-left:auto;
margin-top:20px;
text-align:center;
}

#colonnasx {float:left; text-align:left;
width:200px;
background-color:#FFD700;
}

#colonnadx {float:right; position:absolute;
width:200px; height:100%;
background-color:#FFD700;
right:0px;
}

#testo { text-align:left;
width:550px;
background-color:#000000; color:#ffffff;
margin-left:auto; margin-right:auto;
}

#footer {position:relative;
width:980px; height:150px;
background-color:#1E90FF;
margin-top:20px; margin-bottom:20px;
margin-left:auto; margin-right:auto;
}

</style>

</head>

<body>

<div id="wrapper">
<div id="header"> header
<div id="menu"> menu
</div>
</div>

<div id="contenuto">
<div id="colonnasx">colonna sx
<br><br><br>
</div>

<div id="colonnadx"> colonna dx
</div>

<div id="testo">
testo <br><br><br> <br><br><br> <br><br><br> <br><br><br> <br><br><br> <br><br><br> <br><br><br> <br><br><br>
</div>
</div>

<div id="footer"> footer
</div>

</div>
</body>
</html>
[/HTML]

Esiste una soluzione che permetta di visualizzare la pagina correttamente su tutti i browser?

Vi ringrazio in anticipo
Fabio

marinski

IE ha avuto, ed in certi casi ha ancora adesso, dei bug molto noiosi, quelli a cui fai riferimento sono:
il Float drop bug e l'errore del doppio margine!
Se vuoi informati su Google, io ti posso dire solo che alla fine mi sono arreso e ho usato una tabella.

fabioperez

Io invece ho risolto con un secondo css per Internet Explorer dove ho aggirato i problemi di visualizzazione.
Ciao
Fabio