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>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>test spazi</title>
<style type="text/css">
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