Ecco il css semplificato (ho tolto quegli elementi di formattazione che non servono a capire com'è strutturata la pagina):
html,
body {
margin: 0;
padding: 0;
height: 100%
}
body {
text-align:center;
background-color: #F5EFDA;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 70%;
line-height: 1.7em;
color: #663333;
}
body>div#container {
/*(necessario per Opera e Mozilla) per allungare il #container fino al fondo della pagina
anche se il #contenuto è più corto: serve per posizionare #footer e immagine di sfondo in fondo alla pagina*/
height:auto;
min-height:100%
}
#container {
position: relative;
min-height: 100%;
height: 100%;
width:740px;
voice-family: "\"}\"";
voice-family: inherit;
height: auto;
margin:0px auto;
padding:0;
text-align:left;
background-image: url(img/container_bg.gif);
background-position: center top;
background-repeat: repeat-y;
}
#header {
margin: 0;
padding: 0;
height: 145px;
background-image: url(img/header.jpg);
background-position: center top;
background-repeat: no-repeat;
}
#contenuti {
margin: 30px 0 0 62px;
padding: 0;
width: 410px;
padding-bottom: 120px;
}
#menu {
margin: 0;
padding: 0;
background-color: #E9D8BF;
background-image: url(img/ricciolo.gif);
background-position: bottom left;
background-repeat: no-repeat;
width: 180px;
position: absolute;
top: 145px;
right: 38px;
}
#footer {
position: absolute;
bottom: 0;
left: 0;
width: 740px;
height: 109px;
margin: 0;
padding: 0;
background-image: url(img/footer.gif);
background-position: center bottom;
background-repeat: no-repeat;
}
Questo è tutto.
Idee?
In generale funziona, solo che la prima volta che carico una nuova pagina con più contenuti (ma layout identico), il footer viene a trovarsi a mentà pagina, e non in fondo, a meno che io non faccia un "aggiorna". Poi non capita più.
Mi succede con Firefox (e mi è capitato anche con IE6 sul mio portatile).
Avevo letto che poteva succedere, ma non so più se c'è un modo per ovviare al problema o no.