[css] firefox mi sovrappone DIV

[tigerjack]

ciao,

ho questa struttura:
<div class="center" align="center">
<div id="header"></div>
<div id="tabbar"></div>
<div id="colorbar"></div>
<div id="contentarea"></div>
</div>

e questo è il CSS:

#header {
  float: left;
  width: 776px;
  height: 105px;
  background: #fff url(../images/sc_header.jpg) top right no-repeat;
}

#tabbar {
  float: left;
  width: 776px;
	padding-top: 4px;
	height: 25px !important;
	height: 170px;
	background: url(../images/sc_tabbar_bg.png) repeat-x;
}

#colorbar {
  float: left;
  width: 776px;
	height: 10px;
	overflow: hidden;
	background: url(../images/sc_orange_bar_top.png) repeat-x; 
}

#contentarea {
  float: left;
  width: 760px !important;
  width: 776px;
	background: #f4f4f4;
	padding: 8px;
}

mi succede che il id="contentarea" si sovrappone al id="tabbar" e id="colorbar"> con FIREFOX!

come si può risolvere?

grazie

[Myaku]

due domande: il padre ha una width dichiarata?
il clear ce l'hai messo?

se poi hai un link possiamo verificare in cosa consiste il "si sovrappone"

[tigerjack]

ciao,

grazie per il suggerimento...

ma chi è il padre secondo te?

il clear non è stato inserito.


grazie

[Myaku]

Originariamente inviato da tigerjack
ciao,

grazie per il suggerimento...

ma chi è il padre secondo te?

non è secondo me ... l'hai fatto tu il codice, sai quale div ti contiene gli altri

<div class="center" align="center">
<div id="header"></div>
<div id="tabbar"></div>
<div id="colorbar"></div>
<div id="contentarea"></div>
</div>

il mio appunto è dato dal fatto che ho visto che hai attribuito una larghezza considerevole agli elementi (layout sviluppato in orizzontale?), se hai dato una larghezza al padre rifai i conti (larghezza padre > della somma degli elementi con float)

il clear non è stato inserito.

quando usi elementi con float, questi poi devono essere riportati nel flusso del documento, e ti serve quindi dare il clear all'elemento che li segue. Altrimenti, il layout può avere comportamenti (visualizzazioni) sbagliate. Per come usare il clear, ti rimando alle guide di base ai css - tipo quella di html.it

poi, ripeto, se non riesci a risolvere dacci un link così vediamo il codice completo e il risultato sul browser