ie background image errors

[emehrkay]

i have a popup div, absolute positon and it contains two other divs

 

<div id="qbc">
<div id="qbc_top">
</div>
<div id="qbc_bottom">
</div>
</div>

 

the qbc is a fixed width, variable height element. So i made the qbc_top variable width, qbc_bottom fixed to allow for expansion.

 

here is the gist of my css

 

#qbc{
position: absolute;
width: 700px;
margin-top: -1000px;
display: none;
z-index: 999999;
}

#qbc_top{
background: url(../images/browser-container-bkg-top.png) no-repeat;
margin-top: -10px;
}

#qbc_bottom{
height: 40px;
line-height: 40px;
background: url(../images/browser-container-bkg-bottom.png) no-repeat bottom left;
}

 

the image in qbc_top is about 400px in hieght, but the top portion doesnt show in ie. (for some strange reason, the image was 10px offset in ff, so i had to add that margin-top;)

 

here is how it looks in both browsers. what you're looking for is the blue bkg with rounded corners (the ie pic is ie6 and i havent added the png hacks to the css yet, so it is a little off colored)

 

 

if i were to add a border: 1px sold #000; to qb_top, the bkgimg would extend to the top in ie, but it ignores the rounded corners part of the image (if that makes sense)

 

basically, with the css that i have above, the qb_top bkg image cuts off, any reason why?

 

thanks