Help with z-index layering of images in IE

Hi - new to this forum. I'm trying to use z-index on 3 relatively positioned div's to layer 3 images (1 inside each div).

The code's a bit crazy with mixed php and html, but I'll try to copy paste the relevant pieces code.
html:

<div id='phone'>
  <div id='mainphone'>
    <div id='screenshot'></div>
    <div id='lines'>
      <a class="line" id="line1" href="#" onclick="sendData('line', 1);" title="line 1"></a>

css:

#phone{position:relative;display:none;}
#mainphone{position:relative;float:left;width:349px;height:306px;margin-top:10px;
  background:transparent url(../images/Mercurio.gif) repeat scroll 0 0;}
#screenshot{position:relative;float:left;width:320px;height:222px;left:7px;top:25px;z-index:-5;}
.line{position:absolute;width:15px;height:21px;margin:0;padding:0;background:transparent url(../images/Mercurio.gif) repeat scroll -350px 0;} #line1{left:336px;top:139px;}*/
#line1{left:328px;top:48px;}

So this is an app which allows me to remotely control Cisco phones. The 'phone' div is a container. The 'mainphone' div uses the background to display the phone. The 'screenshot' holds an img of a remotely pulled screenshot from the phone itself. Because my app supports about a dozen different Cisco phone models each with different screen sizes, and the various other interface options change, I'm using javascript to dynamically reposition various images.

As is, it works flawlessly in firefox 3.6.6. In IE 7.0, the z-ordering is as follows (from back to front): mainphone, screenshot, line1. It should be as follows (back to front): screenshot, mainphone, line1. The reason that the screenshot has to be in the background is that a couple of Cisco phone models return a screenshot with about 25ish pixels of white space on the right side, so by having that in the background, the 'mainphone' image (with a transparent middle section) should be covering up that white space.

So from digging, I see that using z-index on relative positioned elements can be tricky, and I haven't been able to figure this out so hoping someone could point me in the right direction for fixing this in IE. Maybe I should be applying the z-index to the img within the screenshot div rather than the div itself?

thanks,
Will