Dopo il mio post di ieri, dopo innumerevoli TENTATIVI e PROVE (diciamo che non ho proprio seguito un approccio costruttivo), sono riuscito a mettere a posto il problema relativo al posizionamento dei DIV con IE7.
Partiamo dal problema:
Abbiamo disegnato il sito utilizzando un layout tableless (niente tabelle se non dove strettamente necessario) e DIV innestati uno dentro l'altro posizionati tramite CSS.
La struttura sostanzialmente è questa:
- Container Principale
- Header
- Container secondario
- Navigation menu
- Main Content
- Service Boxes
- Footer
Il layout è quindi il classico Header, 3 colonne di contenuti, footer. il footer è stato posizionato all'interno del container secondario e non al di fuori (come sarebbe forse più logico aspettarsi) perché riportava e riempiva il background di tutto il DIV contenitore.
I div avevano la seguente definizione di stile:
div#container
{
text-align: left;
width: 780px;
margin: 0 auto;
}
div#header
{
padding: 6px 16px 2px 16px;
background: url(/Images/backgroundheader.gif) repeat-y top right;
}
div#container2
{
background: url(/Images/backgroundbody.gif) repeat-y top right;
}
div#nav
{
margin: 0 2px 0 16px;
float: left;
width: 182px;
display: inline;
font-size: 9px;
}
div#sidebar
{
padding: 0 0px 0 0px;
margin: 0 16px 0 0px;
float: right;
width: 182px;
display: inline;
font-size: 9px;
}
div#content
{
float: left;
width: 380px;
height: 600px;
height: auto !important;
height: 1%;
}
div#footer
{
** position: relative !important;
** position: fixed;
padding-top: 15px !important;
padding-top: 20px;
text-align: center;
display: block;
background: url(/Images/backgroundfooter2.gif) no-repeat top right;
}
Prima dell'inserimento degli attributi evidanziati da ** il footer andava a posizionarsi sotto il div della sidebar, risultando in un layout completamente "errato" e mal posizionato. Aggiungendo quei due attributi il footer è tornato a posizionarsi al di sotto e correttamente.
GG