title: z index background issue in IE
body: <p>I have a jQuery tools scroller set up with controls managing two separate divs of info - one images, the other related text that needs to sit over the top of the images with a transparent bg image. I am using z-indexing to achieve this and am aware of IE's issues with this but am unable to sort it (tested in IE6-8). Image of the issue below:</p>
  
  <p><a href="http://test.shakingpaper.com.au/not_working.png" rel="nofollow noreferrer">http://test.shakingpaper.com.au/not_working.png</a></p>
  
  <p>It seems that the overlayed div is taking on the containers white. Try as I might, I can't resolve this. HTML/CSS code below:</p>
  
  <pre><code>     &lt;div id="content"&gt;
  
   &lt;div id="nav"&gt;&lt;/div&gt;
  
      &lt;div class="s4 slideshow"&gt;
        &lt;div&gt;
              &lt;img src="&lt;?php bloginfo('stylesheet_directory'); ?&gt;/images/hero_1_white.jpg" width="770" height="367" /&gt;
              &lt;/div&gt;
              &lt;div&gt;
              &lt;img src="&lt;?php bloginfo('stylesheet_directory'); ?&gt;/images/hero_1_white.jpg" width="770" height="367" /&gt;
              &lt;/div&gt;
              &lt;div&gt;
              &lt;img src="&lt;?php bloginfo('stylesheet_directory'); ?&gt;/images/hero_1_white.jpg" width="770" height="367" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
    &lt;div id="overlay_bg"&gt;&lt;/div&gt;
  
    &lt;div class="s4 information"&gt;
        &lt;div&gt;
         &lt;h1&gt;Support&lt;/h1&gt;
      &lt;p&gt;Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae.&lt;/p&gt;
      &lt;p&gt;&lt;a href="#"&gt;Support Us&lt;/a&gt;&lt;/p&gt;
              &lt;/div&gt;
              &lt;div&gt;
               &lt;h1&gt;Events&lt;/h1&gt;
      &lt;p&gt;Quisque lacegestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae.&lt;/p&gt;
      &lt;p&gt;&lt;a href="#"&gt;Read More&lt;/a&gt;&lt;/p&gt;
              &lt;/div&gt;
              &lt;div&gt;
         &lt;h1&gt;Regional&lt;/h1&gt;
      &lt;p&gt;Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae.&lt;/p&gt;
      &lt;p&gt;&lt;a href="#"&gt;Support Us&lt;/a&gt;&lt;/p&gt;           
              &lt;/div&gt;
          &lt;/div&gt;
  
   &lt;/div&gt; &lt;!-- end of content --&gt;
  
      #content { 
       height: auto;
           min-height: 300px !important;
           overflow: hidden;
           position:relative;
           margin-left: 27px;
           width: 770px;
           padding-bottom: 43px;
      }
  
   #nav {
    width: 60px;
    z-index: 10000;
    position: absolute;
    top:340px;
    left: 28px;
   }
  
   .s4 {
    width: 770px;
    height: 370px;
    overflow: hidden;
   }
  
   #nav a {
    background-color: transparent;
    background-image: url(images/transition.png);
    background-position: 0 0;
    text-indent: -1000em;
    width: 10px;
    height: 10px;
    display: block;
    float: left;
    margin-right: 5px;
   }
  
   #nav a.activeSlide {
    background-position: 0 -10px;
   }
  
   #overlay_bg {
    background: url(images/soild_block.png) no-repeat;
    width: 318px;
    height: 339px;
    z-index: 5000;
    position: absolute;
    top: 28px;
   }
  
   .information {
    position: absolute;
    top: 60px;
    left: 28px;
    z-index: 16000;
    width: 290px;
    height: 260px;
    color: #FFF;
   }
  
   .information h1 {
    font-size: 50px;
    font-style: italic;
    text-transform: uppercase;
   }
  
   .information p {
    font-size: 17px;
    line-height: 27px;
    margin-top: 37px;
   }
  
   .information a {
    font-size: 13px;
    padding-bottom: 2px;
    border-bottom: 1px solid;
    color: #FFF;
    text-transform: uppercase;
    font-style: italic;
   }
  
   .information a:hover {
    color: #000;
   }
  </code></pre>
  
  <p>Any help would be greatly appreciated. </p>