Problem displaying z-index with internet explorer

I am making a website, and am having trouble viewing things in IE. Every other browser seems to be fine. After some google searches about z-index, a lot of people have mentioned bugs with IE, mainly the fix seems to be to go up from 0 - 1000 - 2000. Afters hours of searching, i'm still confused. I am about a bit of a noob when it comes to this kind of thing. Any help or advice would be much appreciated. Here is my code:

        #bg_mask {
            position: absolute;
            background-color:#000000;
            background-repeat:no-repeat;
            background-attachment:inherit;
            background-position:center;
            z-index: 10;
            visibility: hidden;
        } 

        #frontlayer {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 31.8em;
            padding : 30px;
            width: 20em;
            height: 23.4em;
            background-color: #000000;
            visibility: visible;
            border: 0px solid black;
    开发者_C百科        z-index: 30;
        } 

        #toplayer {

            visibility: visible;
            z-index: 2;
        }

        div.scroll{
            overflow:auto;
            filter:alpha(opacity=0.85);
            -moz-opacity:0.85;
            -khtml-opacity:0.85;
            opacity: 0.85;
        }

In most browsers (chrome and firefox) I get a slightly transparent overlay above my background picture, which I am using from the code above. With IE however, I see nothing.

Note: I have tried all versions of IE.

Thanks :)

Include the proper DOCTYPE into the html tag. This one might work:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"