z problème d'arrière-plan d'index dans IE

Question

J'ai un défilement d'outils jQuery mis en place avec des contrôles gérant deux divs séparés d'images info-one, l'autre texte connexe qui doit être assis sur le dessus des images avec une image bg transparent. J'utilise z-indexing pour y parvenir et je suis conscient des problèmes d'IE avec cela, mais je suis incapable de le trier (testé dans IE6-8). Image de la question ci-dessous:

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

Il semble que la div overlayed prend les conteneurs blancs. Essayez comme je pourrais, je ne peux pas résoudre cela. Code HTML/CSS ci-dessous:

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

Toute aide serait grandement appréciée.

Answer 1

Est-ce que cela se produit dans tous les navigateurs ou seulement dans IE 6? J'ai testé votre code dans IE 7 & 8 et il semble superposer la div transparent. Dans IE 6 j'ai des problèmes comme quoi ressemblait votre lien d'image. Si c'est seulement dans IE 6 alors je dirais que c'est le png transparent que vous utilisez comme arrière-plan. Il existe des hacks Java que vous pouvez utiliser pour résoudre ce problème. Voici une très bonne source que je l'ai utilisé avant de résoudre ce problème:

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