ie7 not displaying bg images in stacked divs

[scarhand]

css:

 

#menu {
  float: right;
  margin-top: 40px;
  background: url(images/mbg.jpg);
}
#ml {
  background: url(images/ml.jpg) no-repeat top left;
}
#mr {
  background: url(images/mr.jpg) no-repeat top right;
}
#mr ul {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}
#mr li {
  float: left;
  padding: 0px 10px;
  font-size: 8pt;
}
#mr li a {
  display: block;
  line-height: 30px;
  color: #ffffff;
  text-decoration: none;
}
#mr li a span {
  display: block;
  padding: 0px 10px;
}
#mr li a:hover {
  background: url(images/mhl.jpg) no-repeat top left;
  color: #000000;
}
#mr li a:hover span {
  background: url(images/mhr.jpg) no-repeat top right;
}
.ms {
  background: url(images/ms.jpg) no-repeat top right;
}

 

html:

 

  <div id="menu">
    <div id="ml">
      <div id="mr">
  
        <ul>
        <li class="ms"><a href="index.php"><span>HOME</span></a></li>
        <li class="ms"><a href="features.php"><span>FEATURES</span></a></li>
        <li class="ms"><a href="requirements.php"><span>REQUIREMENTS</span></a></li>
        <li class="ms"><a href="demo-video.php"><span>DEMO VIDEO</span></a></li>
        <li class="ms"><a href="demo-site.php"><span>DEMO SITE</span></a></li>
        <li class="ms"><a href="order-now.php"><span>ORDER NOW</span></a></li>
        <li><a href="contact-us.php"><span>CONTACT US</span></a></li>
        </ul>

        <div class="clear"></div>
  
      </div>
    </div>
  </div>

 

in ie8 and FF this works perfectly, but in ie7 it is not displaying the "ml.jpg" and "mr.jpg" background images to make the corners rounded.

[SuperBlue]

I'm not familiar with the mentioned Technique, however, you may want to try out the one i mentioned in http://www.phpfreaks.com/forums/index.php/topic,258107.0.html