IE7 CSS z-index issue not apparent on any other browser
===

I have an issue with CSS z-index on IE7 that I cannot seem to get to the bottom of. 


    #screen {
        display: none;
        background-image: url('/images/bg.png');
        background-repeat: repeat;
        position: fixed;
        top: 0px;
        left: 0px;
        min-width: 100%;
        min-height: 100%;
        z-index: 10000;
    }
    
    <div id="screen"></div>

I have an overlay that appears on page load called `r_box`

    <div id="r_box">
        <div id="message_panel">
            ...Content in here...
        </div>
    </div>

    #r_box
    {
        width: 335px;
        height: 337px;
        background: url("/images/panel.png") no-repeat scroll 0 0 transparent;
        position: fixed;
        margin-left: -150px;
        margin-top: -130px;
        left: 50%;
        top: 50%;
        z-index: 10001;
        display: none;
    }

    #r_box #message_panel {		
        color: #fff;
        z-index: 10001;
        bottom: 95px;
    }

However, the problem I am having on IE7 _only_ is that on page load the `screen` div is always on top of `r_box`. I have tested this on IE8, IE9, FF, Safari and Chrome and it works on all these browsers. The only one where it is an issue is Internet Explorer 7.

Is this likely to be an issue with the `screen` or `r_box` DIVs or could this be something else?