Non riesco ad allineare con IE
Ciao
Ho caricato sul mio spazio web le prime pagine di prova del mio nuovo sito
Ho costruito le pagine del sito ottimizzandolo per Firefox e sembra che tutto sia a posto con questo browser il css fa il suo dovere bene.
Questo il link alla home:
http://www.gianlucaweb.altervista.org/
Non si può dire lo stesso se il sito viene visualizzato con IE (6, 7 fanno schifo entrambi) nonostante abbia creato un foglio di stile dedicato solo al browser di casa microsoft. In pratica ho inserito uno script che fa il controllo del browser e "switcha" un folgio o l'altro.
Se aprite la pagina con IE vi accorgete che i box non sono centrati ed allineati all'header come in firefox ma leggermente spostato sulla sinistra
(ho dato un po' di spessore ai 2 div contenitori per meglio rendermi conto del loro posizionamento.
Ho provato a cambiare i valori aumentando le dimensioni dei div e dei box ma combinavo dei casini: i div si spostavano sotto.
Come posso impostare un corretto allineamento almeno con L'header e il menu dei linK?
Anche i margini di destra del forum PHPbb3 con ie risultano più larghi..ma pazienza.
Non riuscendo ad avere con IE e Firefox un allineamento identico almeno che nei 2 browser i div risultino allineati. Io per la costruzione ho preso come punto di riferimento (sia in firefox che ie) il layout che avevo realizzato per il forum.
Questo il codice dei div del corpo della pagina:
Codice HTML:
<div id="menu">
<div id="box1"> </div>
<div id="box2"> </div>
<div id="box3"></div>
<div id="box3"></div>
</div>
<div id="content">
<div id="in_content1"> </div>
<div id="in_content2"> </div>
<div id="in_content3"> </div>
<div id="in_content4"> </div>
</div>
e questo parte del codice del file styleIE.css che interessa il mio problema
Codice:
body {
text-align: center; /* IE5.x */
background-image: url("immagini/sfondo-body.jpg");
margin: 0;
}
#telaio {
background-color: #FFFFFF;
padding: 0 0px;
min-width: 650px;
width: 800px;
margin: 0 auto;
padding:6px 10px 0px 10px;
border:solid #999999 1px;
text-align: left; /* IE5.x */
}
#headerbar {
margin-top: 11px;
margin-bottom: 0px;
padding: 0 20px;
color: #FFFFFF;
margin-bottom: 40px;
padding: 0 5px;
}
.....
#content {
width:570px;
float: right;
height:620px;
margin-top:20px;
margin-bottom:0px;
background-color: #FFFFFF;
border:solid 1px;
color: black;
}
#in_content1 {
width:565px;
float: right;
height: 140px;
margin-bottom: 10px;
background-color: #FFFFFF;
border:solid 3px;
color: black;
}
#in_content2 {
width:565px;
float: right;
height: 140px;
margin-bottom: 10px;
background-color: #FFFFFF;
border:solid 3px;
color: black;
}
#in_content3 {
width:565px;
float: right;
height: 140px;
margin-bottom: 10px;
background-color: #FFFFFF;
border:solid 3px;
color: black;
}
#in_content4 {
width:565px;
float: right;
height: 140px;
margin-bottom: 10px;
background-color: #FFFFFF;
border:solid 3px;
color: black;
}
#menu {
width:210px;
float: left;
background-color: #FFFFFF;
height:620px;
margin-top:20px;
margin-right:8px;
margin-bottom: 0px;
border:solid #999999 1px;
}
#box1 {
width: 200px;
height: 140px;
border: solid 3px;
margin-right: 0px;
margin-bottom: 10px;
color: black;
background-color: #ffffff;
}
#box2 {
width: 200px;
height: 140px;
border: solid 3px;
margin-right: 0px;
margin-bottom: 10px;
color: black;
background-color: #ffffff;
}
#box3 {
width: 200px;
height: 140px;
border: solid 3px;
margin-right: 0px;
margin-bottom: 10px;
color: black;
background-color: #ffffff;
}
#box4 {
width: 200px;
height: 140px;
border: solid 3px;
margin-right: 0px;
margin-bottom: 10px;
color: black;
background-color: #ffffff;
}
Grazie anticipatamente
