[CSS + IE6] vreemde spacing

[Verwijderd]

Hoi tweakers

Ik heb hier een probleem met een website. Hieronder zie je een stukje van de desbetreffende html-code.

HTML:

<div id="container">
        <div id="header">
            <div id="banner">
                <div id="logo"></div>
                <div id="adds"></div>
                <div id="userlogin"></div>
                <div id="menu">
                  <ul id="buttons" >
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Diensten</a></li>
                    <li><a href="#">Producten</a></li>
                    <li><a href="#">Info</a></li>
                  </ul>
                </div>
                <div id="scrollbar">test</div>
            </div>
        </div>
        <div id="content">
            <div id="sidebar"></div>
            <div id="footer"></div>  
      </div>
    </div>

Het probleem situeert zich tussen 2 divs: #banner en #content. In IE7 en FF2.0 heb ik het resultaat dat ik wens. In IE6 wringt zich namelijk het probleem dat er een opening zit tussen die de genoemde 2 divs.

Dit is de css code

Cascading Stylesheet:

#header #banner 
        {
        width:950px;
        height:147px;
        margin:0 auto;
        }


#container #content{
        position:relative;
        top:20px;
        width:950px;
        height:100%;
        background-color:#FFF;
        padding:0px;
        margin:0 auto 0 auto;
    }   

Ik heb het voorbeeld ook online geplaatst:

http://www.jamasoft.org/projects/khcs

Ik heb google zitten zoeken op de volgende termen: spacing between divs, spacing divs ie6 , positioning, layouts with css.

Kan iemand mij even in de juiste richting sturen, want ik zit echt even vast.

[Snake]

Er zijn inderdaad heel wat problemen met het box model van IE6, misschien kan je eens zoeken op deze termen: http://www.google.be/sear...el+hack&btnG=Zoeken&meta=

Zoek ook eens op de IE6 double margin bug!

[Michali]

Double margin bug treed alleen op als je 2 elementen naast elkaar laat floaten en dan een horizontale margin op een van beide instelt. Ik verwacht dus niet dat dit probleem daar mee te maken heeft. Het komt door je vreemde gebruik van position: relative;. Je positioneert je elementen zo naast elkaar, echter blijft de ruimte die deze elementen normaal zouden innemen gewoon bestaan, blijkbaar nemen IE7 en Fx deze wel weg. Zoek eens uit hoe floats werken, die zijn voor dit soort zaken veel geschikter.