Problema con footer

[pezzo]

Ciao ragazzi,
in alcune pagine del mio sito a tre colonne con posizionamenti assoluti, a volte i sottoelementi del footer vanno a sovrapporsi alle colonne così:



A cosa può essere dovuto? l'errore viene visualizzato solo in alcuni casi con Netscape e Firefox...

Ecco il codice html e css:

<div id="footer">
     <div id="footersn">
     Statistiche


     Chi siamo
     <font color="aqua">e</font>
     Contatti

     </div>
     
     <div id="footerdx">
     Link

     <a class="colore_link" href="ringraziamenti.php">
     Ringraziamenti</a>

     </div>
     

    © Tutti i testi, le immagini e il materiale riportato sono copyright dei rispettivi autori,
 l'uso qui fatto
    degli stessi è volto ai soli fini giornalistici e documentali.</div>

</div>

div#footer{

text-align:center; 
padding: 5px 20px;
background-color: black; color: #fff;
}

/* i div successivi sono i sotto elementi di footer*/
div#footersn {

position:absolute; 
left: 10px;
width: 150px;
height: auto; 
text-align:center;
}

div#footerdx {

position:absolute; 
right: 10px;
width: 150px;
height: auto; 
text-align:center;
}

Thank you

[seed_squall_it]

Ci sono errori concettuali nel CSS. Hai dichiarato i box interni al footer con position: absolute, ma questo posizionamento a quale elemento si riferisce? Dovresti dichiarare almeno il box footer con position: relative e specificare l'offset verticale dei box posizionati in modo assoluto al suo interno con top: XXpx.

Ma non facevi prima a dichiarare i box footerdx e footersn come flottanti uno a destra e uno a sinistra? Poi usavi un
appena prima di chiudere il footer per "ripulire" il float con un clear: both.

Altra cosa...evita di usare il tag <font>: è scorretto. Anche se penso che nella DTD XHTML 1.0 Transitional sia ancora accettato (uso ormai sempre e solo la 1.0 Strict) è bene abituarsi a non utilizzarlo più. Allo stesso modo, evita di usare target="_blank" e utilizza la tecnica del JavaScript accessibile per aprire le pagine in nuove finestre.

Link

PS: text-align: center puoi eliminarlo dalle regole dei box footerdx e footersn...viene ereditato automaticamente dal box footer.

[pezzo]

:master: hai ragione, sono errori di gioventù...

Mi spieghi meglio questo concetto?

Ma non facevi prima a dichiarare i box footerdx e footersn come flottanti uno a destra e uno a sinistra? Poi usavi un
appena prima di chiudere il footer per "ripulire" il float con un clear: both.

Mi rendo conto che è più semplice della mia soluzione 'spartana' (e sbagliatissima) ma mi confondo un po' con il br e il clear... Ti chiedo troppo di farmi un esempio di codice?

Mi rendo conto a distanza di tempo di avere commesso una serie di errori concettuali e sto pian piano recuperando tutto... Avevo imparato troppe cose nuove insieme e solo adesso sto comprendendo certi concetti che prima erano un po' oscuri...

Grazie!

[seed_squall_it]

<div id="footer">
<div id="footersn">
.......
</div>
<div id="footerdx">
.......
</div>


© Tutti i testi, le immagini e il materiale riportato sono copyright dei rispettivi autori.</p>


L'uso qui fatto degli stessi è volto ai soli fini giornalistici e documentali.</p>
<br class="clear" />
</div>

#footer{
text-align:center; 
background-color: black;
color: #fff;
}

#footer p {
padding: 5px 164px;
margin: 0;
}

#footersn {
width: 150px;
float: left;
}

#footerdx {
width: 150px;
float: right;
}

.clear {
clear: both;
}

[pezzo]

Sono in debito con te... Grazie mille!