IE: How to display absolute positioned divs under a relative positioned div

currently I'm creating a layout, which requires a div having background graphics and the top and the bottom. My mark-up which I created works fine in FF and looks like this:

#wrapper {
width: 520px;
padding: 2px;
position: relative;
float: left;
z-index: 4000;
}

#upper_bg {
    background:url(images/header_top.png);
    position:absolute;
    height:200px;
    width:520px;
    z-index: 1000;
    margin: -2px;
}

#row_wrapper {
    position:relative;
    float: left;
    z-index: 3000;
}

#lower_bg {
    background:url(images/header_bottom.png);
    position:absolute;
    bottom:0px;
    height:200px;
    width:520px;
    z-index: 1000;
    margin: -2px;
}

<div id="wrapper">
   <div id="upper_bg">
      <!-- ie fix for d开发者_如何学编程isplaying empty divs -->
   </div>
   <div id="row_wrapper">
      ... content!
   </div>
   <div id="lower_bg">
      <!-- -->
   </div>
</div>

In IE (7,8 & 9) however the upper and lower_bg divs are invisible. Anybody knows how to fix this?

solved the problem. Indeed, the shown html in my question didn't reproduce the result. After a bit fiddling, I found out that IE was in quirks mode. I created the html via xslt and forgott to add the xsl:output tag and set it to html. After doing so, IE was fine down to version 7 with the layout.

Add a clear...

<div id="lower_bg">
      blabla floating divs
      <div style="clear:both"></div>
</div>