Hi everyone. I am new in CSS so please help me in this problem. I hope to describe it wright.

I am making div named content where my site content is. I made it with z-index:-1; so an image to be over this div. But in Chrome, FF and safari, content became inactive. I cant select text , click on link and write in the forms. So I tried with positive states in the z-index but IE don't know what this means. Damn. So I decided to make conditional div. Here is the code:

    .content
{
    background:#FFF;
    width:990px;
    position:relative;
    float:left;
    top:50px;
}
.content_IE
{
    background:#FFF;
    width:990px;
    position:relative;
    float:left;
    top: 50px;
    z-index:-1;
}

and here is the HTML:

<!--[if IE 7]>
    <div class="content_IE" style="height:750px;">
        <![endif]-->
            <div class="content" style="height:550px;">

Everything is fine with the z-index but the problem is that if there is no top in .content class everything looks fine in IE but there is no space in the other browsers. If i put back the top:50px; there onother 50px like padding in the .content_IE class. I mean that the page looks like I've put top:50px; and padding-top=50px;. I've try everything like margin-top:-50px; padding-top:-50px; and stuff like this but I am still in the circle. It look fine only if there is no top option in .content class. Please help.