IE6 background-position with a sprite

I have a sprite with two images, top and bottom rounded borders for some feature box. Some example HTML:

<div class="box">
<div class="top"></div>
<div class="middle">Content Here</div>
<div class="bottom"></div>
</div>

And the CSS:

.box {float:left;width:400px;}
.to开发者_开发知识库p,.bottom {float:left;width:400px;height:4px;background-image:url(/images/boxborders.gif);}
.bottom {background-position: 0 -4px;}
.middle {float:left;width:398px;border-left:1px solid #333333;border-right:1px solid #333333;}

In FF 3 and 4, Chrome, IE 7, 8 and 9 it displays as it should, with the .top and .bottom divs "hugging" the middle div to create a box effect.

However, in IE6, the .top div shows the whole background image and seems to have increased it's height somehow, even though the developer toolbar is telling me the height is 4px, it clearly isn't as it shows the whole 8px image then roughly the same amount of pixels whitespace below it before the middle div starts.

Has anybody experienced this before? Any feedback appreciated

Thanks

All you need to do is add an overflow: hidden property.

http://jsfiddle.net/hVvNy/8/