footer a metà pagina prima di aggiornare

[blufragola]

Ciao a tutti.
Ho cercato un po' in giro fino a farmi venire il mal di testa prima di scrivere qui...

Ho costruito diverse pagine di un sito con questa struttura di base:

container
header
contenuto
menu
footer

sia il menu che il footer sono in posizione assoluta: il menu si trova in alto a destra e il footer dovrebbe trovarsi sempre a fondo pagina, dopo i contenuti.

Purtroppo accade che, su Firefox (e ieri sera, dal cliente, anche sull'explorer 6 del mio portatile) quando carico per la prima volta una pagina molto lunga, il footer si viene a trovare non a fondo pagina, ma verso metà, sovrapposto ai contenuti. Se aggiorno la pagina va a posto, ma è un effetto orribile...
Ci sono soluzioni, stratagemmi particolari da seguire?

Grazie comunque.

[borgio3]

Sarebbe importante, per poterti rispondere, vedere il CSS per sapere come sono disposti gli elementi di blocco precedenti al footer.

Ciao Ciao

[blufragola]

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.

[blufragola]

Piccola correzione, perchè ho visto che mi accorcia la pagina se non c'è abbastanza testo nei contenuti: ho tolto la parte in grassetto nello stile del #container.


#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;
}


Boh! Comunque era già una cosa che avevo aggiunto dopo, quindi non era quello a darmi il problema.

[blufragola]

Per dovere di cronaca... magari a qualcuno può servire.

Ho pensato a una soluzione "di fortuna": dato che il problema si presenta (su Firefox) solo la prima volta che la pagina lunga viene caricata, e sparisce dopo un refresh, ho deciso di impostare un refresh automatico appena viene caricata la pagina.

Il solo modo che ho trovato per avere un refresh soltanto, e non ripetuto, è stato quello di impostare un intervallo di refresh di un'ora (nessuno starà un'ora sulla stessa pagina del mio sito... eheheh).

Ho letto un po' in giro e questo è il risultato:

all'interno del tag <head></head> della mia pagina inserisco questo codice

<meta http-equiv="refresh" content="3600;URL=miapagina.html">
<script type="text/javascript">
theHour="1"; //Input the hour
setTimeout("location.reload()",theHour*1000*60*60)
</script>

al posto di "miapagina.html" metterò il nome della stessa pagina in cui ho inserito il mio codice.

Per il momento l'ho testato solo in locale, ma sembra che funzioni: il footer si trova sempre al fondo della pagina, anche su Firefox.

urrà!

[borgio3]

Mi sa che sto dicendo una stupidata enorme, ma dovresti inserire nella dichiarazione del footer la stringa :

clear : both;

Prova e vedi.

Ciao Ciao

[blufragola]

Non serve, perchè il footer è in posizione assoluta, quindi si posiziona indipendentemente dal resto dei contenuti, ma solo in relazione al div "padre" #container che è settato con position:relative.
Inoltre il clear:both presuppone un float:left o un float:right che non c'è.

Cmq ho letto in giro che è proprio un "baco" di Mozilla, e parenti, quello di non interpretare la posizione assoluta del footer al primo colpo, ma solo dopo un aggiornamento di pagina, e pare che non ci siano soluzioni (volendo il footer sempre a fondo pagina, e quindi usando il posizionamento assoluto).

Quella che ho postato mi sembra una soluzione "dignitosa", tutto sommato, o no?

Grazie comunque per i suggerimenti e, in effetti, se si riesce a trovare qualcosa di meglio, ben venga!

A buon rendere.

[blufragola]

Uffaaaaa...
ho messo il sito online e mi dà di nuovo il problema, anche su IE6. Cavoli!!!
Sono molto depressa...

Forse il codice che ho inserito non è utile perchè fa un refresh solo dopo un'ora (e non uno subito e quello successivo dopo un'ora!?!).
Vabbè... provo a indagare nel forum dei javascript.
Scusatemi.

Se trovo la soluzione la metto qui, tanto per finire l'argomento aperto.

Sigh!

[blufragola]

Dopo lunghe ricerche e molte prove ho optato per una soluzione di fortuna: poichè il problema del malposizionamento del footer in posizione assoluta si presenta solo nel caso in cui io carichi inizialmente una pagina con pochi contenuti e in seguito una con una sfilza di righe di contenuti, ma in questo secondo caso di sicuro il footer si deve trovare al fondo della pagina ma non appoggiato al bordo inferiore del browser, ho pensato di poter usare 2 schemi diversi a seconda della quantità di contenuti.

Nel caso della index e di paginette simili avrò un div con id="footer_short" che verrà piazzato, come prima, in posizione assoluta al fondo del #container.

Nel caso delle pagine con molto contenuto avrò invece un div con id="footer_long" che verrà piazzato semplicemente dopo il div#contenuti, con clear:both.

Ecco fatto, un po' laborioso ma nel mio caso efficace.

Naturalmente i due tipi di footer avranno due formattazioni diverse nel CSS.


Spero, e credo, stavolta, di aver risolto il problema.

Ciao