problema con float su firefox? ma di certo sbaglio io

[depit]

ciao a tutti sto lavorando ad un layout grafico per un sito, sto utilizzando i float per creare una grafica a due colonne con header e footer, ma la colonna che flotta su FireFox non viene riconosciuta in altezza dal div che la contiene mentre su IExplorer si... mi date una mano. se non mi sono spiegato bene posso postare anche il codice.
grazie a tutti
depit

[seed_squall_it]

Ciao! Anche se non hai spiegato dettagliatamente la struttura del layout che stai realizzando, penso di aver capito il problema.

Prima di tutto, ricorda che Firefox ha quasi sempre ragione. E' IE la fonte dei veri grattacapi per noi poveri webmaster!
Premesso questo, se ho capito bene, tu hai un div che contiene la colonna flottante, giusto? Ma anche il div dell'altra colonna è flottante? Se è così, è normale quello che si verifica. I box posizionati con float sono "estratti" dal normale flusso del documento e quindi non lo influenzano minimamente. Se vuoi che il box che contiene le colonne flottanti possa essere alto quanto la più alta di esse, devi dichiarare flottante anche lui. Infatti, se un box contiene solo elementi flottanti e non ha un'altezza specificata, la sua altezza sarà nulla (ovviamente IE fa di testa sua e assegna circa 18-22px di altezza ad un div vuoto!). Per farti un es., se hai un codice XHTML così:

<div id="contenitore">
<div id="colonna1">...</div>
<div id="colonna2">...</div>
</div>

e sia colonna1 che colonna2 sono flottanti, se non hai una height impostata per l'elemento contenitore, questo avrà altezza nulla. La soluzione è dichiarare float: left anche il box contenitore. Ovviamente, il box contenitore deve avere anche una width dichiarata pari alla somma delle larghezze delle due colonne, oppure pari al 100% del suo eventuale elemento contenitore.

Spero di esserti stato utile!

[depit]

grande, dicevo io che non poteva essere problema di firefox, perfetto ora va alla grande...
grazie ancora.

[seed_squall_it]

Bene...sono contento che funzioni. Io stesso mi sono trovato nella tua situazione col mio sito tempo fa.

Ah, per la cronaca...a parte il box model errato di IE 5.x, il peggior browser per l'interpretazione dei CSS è a mio avviso IE 6. Ho fatto diverse prove riguardo alle cose più varie con i CSS e IE 5.x e Firefox non davano problemi...IE 6 sì, tanto da sconvolgere interi layout! Quel browser è uno scandalo...

Ciao!

[depit]

mi sono trovato di fronte un altro problema ma stavolta come puoi immaginare ho dovuto fare i conti con IE, ricordi il layout? ecco qui una esplicazione semplice del codice:

<div id="header">
<div id="logo">..logo..</div>
<div id="logo2">..logo2..</div>
</div>
<div id="contenitore">
<div id="colonna1">..menu..</div>
<div id="colonna2">..contenuto..</div>
</div>
<div id="footer">..footer..</div>

allora la parte del contenitore va benissimo ho messo il float:left anche a #contenitore e si adatta in altezza al suo contenuto, ora se utilizzo lo stesso metodo nell'header stranamente IE non mi riconosce più il clear del footer a meno che non metto height=1% a header contenitore e footer...
certo che un browser così strano non si è mai visto..

ancora ciao

[seed_squall_it]

In effetti IE è un browser che definire strano è dir poco...è semplicemente scandaloso! VVoVe:

Per il tuo problema è presto detto...e stavolta (strano ma vero!) non è del tutto colpa di IE.

Quando dichiari flottante anche l'header, una volta che il browser termina la lettura dei 2 box #logo e #logo2 (entrambi flottanti) rimane con l'allineamento "sporco", perché #header è flottante a sua volta e siccome lo è anche il box successivo (#contenitore), il browser li affianca! Per risolvere il problema devi "pulire" l'allineamento flottante di #header, in modo da ripristinare il normale flusso del documento e fare in modo che il successivo box (flottante) sia scritto sotto di esso. Per fare questo, ti basta usare un elemento <div> con altezza 0 oppure, meglio ancora, un
(evita l'<hr> che, sebbene corretto semanticamente, non ha un box model ben definito e ti costringerebbe ad annidarlo dentro un <div> per essere reso invisibile impostanto a 0 la sua altezza).
Ti conviene aggiungere una classe "clear" nel tuo CSS in questo modo:

.clear {
clear: left;
}

Il tuo codice XHTML va quindi modificato così:

<div id="header">
<div id="logo">..logo..</div>
<div id="logo2">..logo2..</div>
</div>

<br class="clear" />

<div id="contenitore">
<div id="colonna1">..menu..</div>
<div id="colonna2">..contenuto..</div>
</div>
<div id="footer">..footer..</div>

L'elemento
inserito in questo modo non genera un "ritorno a capo" perché pulisce l'allineamento di un box flottante e ripristina il flusso normale del documento nel punto in cui è inserito.

Ciao! E...non vorrei scoraggiarti, ma con IE dovrai prepararti ad avere spesso mal di testa se ti sei avvicinato da poco ai CSS...