Distanze differenti nei browser

[Horus-Ra]

Il sito è strutturato in questo modo (metto solo le parti interessate):

<div id="container">

<div id="header">
</div>
<div id="barra">
</div>

</div>

Firefox mi tiene una distanza tra header e barradi 5 px, come voglio che sia, mentre IE6 me lo tiene a una distanza maggiore (credo sui 30px) e IE7 me li tiene invece addossati, senza distanza tra loro.

Queste le classi:

div#header { 
    height: 200px;
    max-height: 158px; 
    padding: 0px;  
    margin: 0px;
    color: #900;
}

div#barra { 
    clear: left; 
    float: left;
    text-align: left; 
    background-color: #FFFDF0;
    padding-bottom: 0px;
    margin-bottom: 0px;
    height: 20px;
} 

Ho provato a inserire margin-top nella barra (mettendo l'attributo !important per Firefox e impostandolo a 0) e la stessa cosa con il margin-bottom nell'header, così:

margin-top: 0px !important;
margin-top: 5px;

Ma non cambia niente