[Resolved] Going insane with IE DIV Height Bug

OK, I have a very simple layout here that is giving me fits in IE.

Here's my CSS:

body {
margin: 10px 0px 0px 10px;
}
#navigation {
width: 780px;
height: 37px;
background-color: gray;
border: 1px solid black;
}
#spacer {
width: 782px;
height: 5px;
background-color: white;
border: 1px solid red;
margin: 0px;
}
#index {
width: 782px;
height: 421px;
background-color: black;
}
#footer {
width: 780px;
height: 57px;
border: 1px solid black;
background-color: gray;
}

And here's my HTML (Using XHTML Transitional, but I get the same problem with Strict as well):

<div id="navigation">

</div>
<div id="spacer">

</div>
<div id="index">

</div>
<div id="spacer">

</div>
<div id="footer">

</div>

So basically I am calling each div after each other, with the spacer DIV used to seperate the middle div from the top and bottom. On Safari/FF/Camino, the spacer div is 5px tall as it is defined. In IE6, it looks like it's about 15-20 pixels in height. Any ideas? This is driving me nuts!