I'm trying to create a simple 'expanding' sidebar and for some reason IE is killing me on this.
I may not be approaching this the right way.


HTML Code:
<div id="main">
  <div id="container" style="position:relative;background: transparent url(img/bg.gif) repeat-y top left;">
    <div id="top_img" style="position:absolute;top:0px;left:0px;"><img src="img/top_img.gif" style="position:absolute;bottom:0px;left:0px;"></div>
    <div id="btm_img"><img src="img/btm_img.gif"></div>
    <div id="content">
    A bunch of content goes in here....
    </div>
  </div>
</div>
This works correctly in FF where the background image is repeated and will expand with the size of the div box and the top of the sidebar and bottom of the sidebar.

In IE, well I don't see anything at all! It seems that the background image is simply taking over and the top and bottom div simply wont show through.
I've also tried to add z-index without any success.

Any help would be appreciated!