div "top" bug IE and everything else. Big problem

Question

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.

Answer 1

The problem is that the two divs aren't mutually exclusive - IE's seeing both of your .content and .content_IE divs, and the positioning that you're trying to set is being governed by the interior .content div (because both have position: relative applied to them). Try removing the .content div from your code and look at it in IE, you'll likely see the same issues you're having in the other browsers. (For more information, this article covers positioning pretty well)

(this is perhaps a bit verbose, but it provides some reasonable strategies for preventing this sort of issue in the future):

There are a few things going on here: IE-specific handling, and z-index issues.

First, a few style/strategy recommendations:

1. Don't use inline styles (the height you're setting on the .content and .content_IE classes), this makes even less sense since you're setting other style properties (like width) through the CSS. The only reason I can see for doing this (and even then I'd still recommend against it) is if you're doing something with Javascript.

2. For the IE-specific declarations, a better approach is to set up your styles so that you can take care of the Cascade - set the base styles (height, width, etc) on the .content class, and then apply a few IE specific rules (like the different height). It would look something like this:

   <style>
       .content {
           background: #fff;
           height: 550px;
           width: 990px;
           position: relative;
           float: left;
           top: 50px;
       }
   </style>
   <!--[if IE 7]-->
   <style>
       .content {
           height: 750px;
       }
   </style>
   

That way you should experience a) less potential weirdness, and b) an easier time maintaining your code. If your stylesheets are large enough, break up the rules in to two (like "main.css" and "ie7.css", and link to the IE one from inside of the conditional comment.

Now, as far as the z-index issue goes - I would recommend applying the z-index on the image that you're trying to place 'on top' of the content, and use a positive value. This should prevent some of what I believe you're seeing happen in IE (IE tends to have issues with negative values in general, so try to avoid them if you can).

If that fixes the problem, keep working with your code so that you don't need the conditional CSS, too.

Answer 2

There are couple of bugs with IE z-index, but what you are describing does not sound like one of them, you must be doing something odd. Can you show an example? I ask because I would try to avoid using conditionals like this if I can.

But here is your short and sweet answer:

.content
{
  background:#FFF;
  width:990px;
  position:relative;
  float:left;
  top:50px;
  *top: 0px;
}

Basically, we are conditionally setting the .content top to 0px for IE.