Html and CSS z-index issue in IE8

Question

I have a question regarding the z-index issue with internet explore 8. I have a main container and there are several divs inside it. My problem is that I use javascript to create new divs on top of my child divs inside the main container. For some reasons the main div border is only top of the newly created div even thought the main container div z-index is 1. To be more clear, this is what it looks like in IE8:

         ----
        |    |   <--newly created div generated by js
-----------------
|       |    |  |
|        ----   |
|               |
|               |
-----------------

desired output..

         ----
        |    |   <--newly created div generated by js
--------|    |---
|       |    |  |
|        ----   |
|               |
|               |
-----------------

My html

<div id='container'>

  <div>
    <a href='#'/>   //hover to a will generate a new div.  //before hover

    <a href='#'>    // <- after hover to the link
      <div id='newDiv'>
        contents....
      </div>
    </a>
  </div>

</div>

css

#container{
  background-color: #FFFFFF;
  border: 1px solid #364B78;
  position: relative;
  padding: 10px;
  clear: both;
  min-height: 200px;
  z-index: 1;
}

#newDiv{
  position: absolute;
  background-color: red;
  top: -175px;
  left: 50px;
  width: 200px;
  height: 150px;
  z-index: 1000;
  padding: 8px;
}

This issue only happens in IE8 and IE7. Are there anyways to solve this? Thanks a lot!

EDIT:

I just found out that the problem is actually from the div's background image in my container div

<div id='container'>

  <div>
    <a href='#'/>   //hover to a will generate a new div.  //before hover

    <a href='#'>    // <- after hover to the link
      <div id='newDiv'>
        contents....
      </div>
    </a>
    <div id='border'></div>    //this is the problematic div
  </div>

</div>


css 

#border {
  position:absolute;
  top:0px;
  left:0px;
  height:4px;
  width:100%;
  background-image:url(/images/top.gif);
//the top.gif is a 2px height and 100% width image which on top of the new div
  z-index: 1;
}

That code seems like it ought to work. Have you tried adding zoom:1; to the #container and #newDiv CSS (I recall older versions of IE have some weird issues around redrawing, and adding zoom:1; can sometimes fix it). This also might be a related issue: http://stackoverflow.com/questions/1287439/ie7-z-index-layering-issues — Sean, May 06 '13 at 20:47
This sounds like an issue with local stacking contexts (which tends to happen in older versions of IE). If so, you'd need to show the CSS and HTML for every relevant element with a `position` value of `relative` or `absolute`, or a `z-index` value other than `auto`. The simplest way is to create a demo (using an online service like [jsfiddle](http://jsfiddle.net)), and add a link to the demo in the question; or, add a link to a live page. — Matt Coughlin, May 06 '13 at 20:52
In spite of your I8/9 issue, why do you apply a stack level value (z-index) to .container? being in relative position will generate a new stack context. And by the way, it will look more clean if you apply a display value of :block to that that is receiving a div inside. The is an inline level element and should not contain block level elements inside unless you modify its display value. — Fico, May 06 '13 at 21:30
Please show the CSS for the parent of `#newDiv`. I'm guessing that it has a `position` value of `relative` or `absolute`, but no `z-index` value. This is the key to the problem. Also, what HTML doctype are you using? Since the browser appears to be in Quirks mode, I'm also guessing that the page either has no HTML doctype or an HTML 4.01 Transitional doctype with no DTD. — Matt Coughlin, May 08 '13 at 15:11

score 1 · Answer 1 · answered May 08 '13 at 13:28

1

"#border" is in a different stacking context than #newDiv - but it is in the same stacking context of #newDiv's parent.

Set a position (relative or absolute) on #newDiv's parent and set a z-index on it greater than the z-index on #border.

answered May 08 '13 at 13:28

Adam Jenkins

51,445
11
72
100

score 0 · Answer 2 · answered May 08 '13 at 12:50

0

Try putting an empty div

<div></div>

After the problematic div.

http://www.sitepoint.com/fix-disappearing-absolute-position-element-ie/

answered May 08 '13 at 12:50

Elliot Lings

1,096
1
9
16

Html and CSS z-index issue in IE8

2 Answers2