z index background issue in IE

Question

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:

http://test.shakingpaper.com.au/not_working.png

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:

     <div id="content">

 <div id="nav"></div>

    <div class="s4 slideshow">
      <div>
            <img src="<?php bloginfo('stylesheet_directory'); ?>/images/hero_1_white.jpg" width="770" height="367" />
            </div>
            <div>
            <img src="<?php bloginfo('stylesheet_directory'); ?>/images/hero_1_white.jpg" width="770" height="367" />
            </div>
            <div>
            <img src="<?php bloginfo('stylesheet_directory'); ?>/images/hero_1_white.jpg" width="770" height="367" />
            </div>
        </div>

  <div id="overlay_bg"></div>

  <div class="s4 information">
      <div>
       <h1>Support</h1>
    <p>Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae.</p>
    <p><a href="#">Support Us</a></p>
            </div>
            <div>
             <h1>Events</h1>
    <p>Quisque lacegestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae.</p>
    <p><a href="#">Read More</a></p>
            </div>
            <div>
       <h1>Regional</h1>
    <p>Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae.</p>
    <p><a href="#">Support Us</a></p>           
            </div>
        </div>

 </div> <!-- end of content -->

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

Any help would be greatly appreciated.

Answer 1

Does this happen in every browser or just IE 6? I tested your code in IE 7 & 8 and it appears to overlay the transparent div fine. In IE 6 I have issues like what your image link looked like. If it is only in IE 6 then I would say that it is the transparent png you are using as your background. There are some Java hacks that you can use to fix this issue. Here is a pretty good source I have used before to fix this issue:

http://homepage.ntlworld.com/bobosola/pnghowto.htm