Ciao..
Come avrai probabilmente già letto QUI, la proprietà clear ti serve in sostanza quando devi annullare l'effetto di eventuali float impostati in precedenza.
Il float serve essenzialmente per allineare un qualsiasi elemento a sinistra o a destra del suo contenitore. Un po' come quando allinei le immagini utilizzando la proprietà ALIGN nel tag <img> in html, anche ci sono comunque delle differenze consistenti.
Ma come già hai notato, queste regole non risolvono il tuo problema.
Si tratta infatti di un problema relativo al cross-browsing per il fatto che ogni browser ha un proprio box-model (per la disposizione degli elementi all'interno della pagina), come Renyp ti ha fatto notare, anche se poi non ha risolto il problema.
Infatti i diversi browser non supportano alcune proprietà dei CSS o le interpretano a modo loro.
Dovrai quindi utilizzare degli hack (trucchi che fanno leva su alcuni bug dei diversi browser) per fare in modo che delle determinate proprietà siano viste correttamente dei vari browser.
Io personalmente ti consiglierei di lasciare il footer a fondo pagina senza troppi "effetti speciali".
Altrimenti puoi dare innanzitutto uno sguardo a questo link
http://congetturando.blogspot.com/20...ter-print.html
e in particolare all'esempio "Fixed footer" http://limpid.nl/lab/css/fixed/footer
Puoi notare come il footer resti correttamente sempre in basso anche su FF e su vecchie versioni di IE (e credo anche su palmari, i quali vedranno la regola "@media screen")
Per FF, il trucco sta in questa regola:
codice:
body>div#footer{
position: fixed;
}
...che sarà vista, appunto, solo da FF mentre gli altri browser la ignoreranno.
Infatti FF, a differenza di IE (fino alla versione 6), supporta il valore fixed per la proprietà position.
Il valore "fixed" fa in modo che il posizionamento sia riferito alla finestra del browser mentre "absolute" fa riferimento al "blocco contenitore iniziale". Ma questo vale solo per alcuni browser.
Ecco perché nel tuo sito con FF, agendo sulla scroll bar, il footer si posiziona in riferimento al box principale (credo sia quello identificato dal tag <HTML>) il quale, scorrendo verso l'alto, si trascina dietro il footer stesso.
In realtà anche IE7 supporta il valore fixed ma solo se si imposta il tipo di documento in strict mode.
Mentre per vecchie versioni di IE viene utilizzato un'ulteriore work-around che però prevede l'impostazione del tipo di documento in quirks mode ... ma questo è un'altro argomento..
Un altro possibile hack per aggirare lo stesso problema sta nell'utilizzare il valore !import che non viene visto dalle vecchie versioni di IE.
Ecco un link a riguardo: http://blog.html.it/archivi/2005/09/...workaround.php
Ti basterà quindi inserire una riga in più:
codice:
position: fixed !important;
position: absolute;
Vedi anche questo link che tratta l'argomento specifico http://css.html.it/articoli/leggi/21...ti-assoluti/4/
Ti consiglio inoltre di spostare il div footer fuori dal div container.
Ora però ti resta un ultimo problema, cioè il tuo footer non deve estendersi per la larghezza della pagina ma, avendo una larghezza fissa, questo si dovrà centrare nella pagina.
Basterà utilizzare un ulteriore contenitore all'interno del footer.
In pratica avrai una roba del genere
La parte dell'HTML
codice:
</div>
<div id="footer"><div>2006 Copyright All rights Reserved by Abcar srl and D Javidani</div></div>
con il footer all'esterno del container e con l'aggiunta di un div
Quindi la parte del CSS da sostituire
codice:
div#footer
{
position:fixed !important;
position:absolute;
bottom:0;
left:0;
width:100%;
}
div#footer div
{
margin:0 auto;
width:760px;
background-color:#333;
height:18px;
color:#666;
padding-top:5px;
text-align:center;
clear:both;
}
Tieni conto che così ti funziona bene su FF e IE7 ma non su versioni precedenti per le quali dovresti utilizzare il quirks mode e aggiungere le regole dell'esempio che ho linkato sopra
Spero di non essermi dilungato troppo.
Buon lavoro 
Rispondi quotando
