Sprites inside the child of an absolute positioned element disappear in IE7 - html

Question

I'm new at this so bear with me. I have an absolute positioned box inside a relative container and inside that box I've two other divs, one for posts and one for sprites. The sprites completely disappear in IE7 along with the top (and only the top) border on the "posts." This is basically what it looks like.
<div id="wrapper">
<div id="content">
<div id="left"></div>
<div id="right">
<div id="icon">
</div><!--icon-->
<div id="posts">
<div class="posts_border"></div>
<!--a bunch of other stuff-->
<div class="posts_border"></div>
</div>
</div><!--right-->
</div><!--content-->
</div>
#wrapper{width:900px;margin-top:111px;margin-left:-450px;position:relative;left:50%;}
#content{background-color:#F6EFC9; position:relative; width:900px;height:965px;}
#left{padding-right:10px;width:550px;}
#right{position:absolute;top:0;right:20px;width:300px;}
#icon{margin:10px 0 0 -8px;top:0;right:20px;}
#icon .icon{margin-left:40px;width:50px;height:50px;float:left;}
#email{background:url("../images/icon-sprite.png")left 0 top -110px;}
#twitter{background:url("../images/icon-sprite.png") left 0 top -55px;}
#rss{background:url("../images/icon-sprite.png") left 0 top 3px;}
#posts{background:#E3C66E; margin-top:10px;position:absolute;top:66px;}
#right .posts_border{height:20px;background-color:#442503;}
http://jsfiddle.net/isherwood/aJwKJ/
This seems to work in every browser aside from IE7.

Answer 1

I had to do this in IE10 by changing my Browser/Document mode to IE7/IE7 on a local document. I had problems with jsfiddle loading in that browser/doc mode. I only changed the following sections
#email {
background-image: url("http://placehold.it/32x32");
background-position: 0 -110px;
}
#twitter {
background:url("http://placehold.it/32x32");
background-position:0,-55px;
}
#rss {
background:url("http://placehold.it/32x32");
background-position:0,3px;
}