Fixing IE extra whitespace in CSS

[admin]

Here's a little IE bug that I wanted to ask about. Does anyone know why on this page (<!-- m --><a class="postlink" href="http://www.darkfaerytale.com/services/testing/morning/">http://www.darkfaerytale.com/services/testing/morning/</a><!-- m -->), the last block of color (it should be 2px) in white won't render as 2px in height in IE like I specified it to? Is there a css hack that could fix this or...?

Thanks.

Here's my HTML -

<div id="blueband"></div>
<div id="graytop"></div>
<div id="whiteborder"></div>

It's the 'whiteborder' ID one that won't render properly.

And my corresponding CSS:

#blueband {
height: 8px;
width: 100%;
border-bottom: #FFFFFF 2px solid;
background: #5A73A5;
float: left;
}

#graytop {
height: 20px;
width: 100%;
border: 0;
background: #F4F4F4;
float: left;
}

#whiteborder {
width: 100%;
height: 2px;
border: 0;
background: #FFFFFF url("images/topgray.jpg") no-repeat top left;
vertical-align: bottom;
float: left;
}height in IE works the same as min-height in FF. It expands to the content height.I'm sure you've got an unstated reason but why don't you just do the borders as border-top and border-bottom on the #greytop div?