Vertical white gap in IE6 - How to get rid of it?!

[joeriatscripts]

The example: Example. And the code again down this post.

There is a vertical gap (assumable 3px) between the MENU & CONTENT and MENU & HEADER. The layout shows perfectly in IE7 / FF2 etc. Just IE6 remains a problem.

So I am stuck... Been reading about the 3px problem, but somehow this does not work for me, as I am NOT using <P> or any images either. Also tried to set a negative margin or padding, does not work either.

Any help is appreciated! (Also if this means I have to change my CSS totally).
Thanks in advance!

[HTML]
html, body {
height: 100%;
margin: 0;
padding: 0;
}

body {
background: #810D1A;
overflow: -moz-scrollbars-vertical;
}

div#container {
position: absolute;
top: 50%;
left: 50%;
height: 600px; /*ie*/
width: 950px;
margin-top: -300px;
margin-left: -475px;
border: 1px #000000 solid;
}

/* Header */
div#header {
background-color: #9400D3;
width: auto;
height: 20px;
margin-right: 0;
border-bottom: 1px solid black;
}

/* Footer */
div#footer {
float: left;
clear: both;
background-color: Red;
width: auto;
height: 20px;
overflow: hidden;
}

/* Ambient Image */
div#vibes {
float: left;
width: 300px;
height: 100%;
background: white;
}

/* Menu */
div#menu {
float: left;
width: 130px;
height: 100%;
background-color: Green;
border-left: 1px solid black;
border-right: 1px solid black;
overflow: hidden;
}

div#content {
background-color: #FFD700;
width: auto;
height: 100%;
margin-right: 0;
}
[/HTML]

[HTML]
<div id="container">
<div id="vibes">Vibes</div>
<div id="header">Header</div>
<div id="menu">Menu</div>
<div id="content">Content</div>
<div id="footer">Footer</div>
</div>
[/HTML]