div "top" bug IE and everything else. Big problem
- by Victor
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.
