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;
}

Answer 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.

Answer 2

Try putting an empty div

<div></div>

After the problematic div.

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