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

```