Cycle couche IE7

Question

J'ai un problème à l'aide d'une petite div qui devrait « hover » sur les photos que commutateurs à l'aide du plug-in du cycle JQuery. Les images sont 950px de large et à droite au-dessus des images d'une petite boîte devrait être avec les dernières nouvelles.

Le problème est en mode compability dans IE la boîte semble le perdre de z-index et se termine derrière l'image. Il fonctionne dans IE8, Opera, Chrome et Firefox.

J'ai essayé d'enlever 2 photos ainsi seulement 1 montre d'image, et pour une raison quelconque, il travaille dans aswell compabilitymode. Je l'ai essayé d'enlever les espaces blancs entre img-tags, mais pas de chance, margin: 0; padding: 0 partout, mais pas de chance

quelqu'un a des idées ce qui pourrait être mal?

CODE CSS

#Content {
    width: 950px;   
}
#NewsWrapper {
    position: relative;
    padding: 0;
    margin: 0;
    top: 0;
}
#NewsListning {
    float: right;
    height: 200px;
    margin: 0;
    padding: 10px;
    background: yellow;
    top: 0;
    right: 0;
    position: absolute;
    z-index: 12;
    width: 300px;
}
#SlideImages {
    width: 100%;
    margin: 0; 
    padding: 0; 
    float: left; 
    z-index: 11;
}
.SlideImage {
    display: inline;
    float: left;
    padding: 0;
    margin: 0;
    z-index: 11;
}

Code de JavaScript

$(function () {
  $('#SlideImages').cycle({
    fx: 'fade',
    speed: 5000
  });
});

code HTML

<div id="Content">
<div id="SlideImages">
    <img src="/Images/Slide1.jpg" class="SlideImage" />
    <img src="/Images/Slide2.jpg" class="SlideImage" />
    <img src="/Images/Slide3.jpg" class="SlideImage" />
</div>

<div id="NewsWrapper">
  <div id="NewsListning">
    <div>
      <strong>Test 2</strong> 
      Lorem ipsum
    </div>
  </div>
</div>

• RESOLU - NOTES SUPPLÉMENTAIRES *

Dans tous les navigateurs, mais IE7 vous devez spécifier, par exemple, top: 0; À gauche: 0 si tu vas position d'utilisation: absolue. Sinon, il finit généralement à droite du site. Une autre chose qui ne marche pas faire sens quand il vient à IE7.

Answer 1

Mettez votre #NewsWrapper comme un indice supérieur à #NewsListing

Cela devrait fonctionner

En outre, je n'ai pas regardé le code pour le cycle mais je suppose qu'il utilise z-index supérieur à 12. Vous voudrez probablement utiliser z-index> 1000 pour quelque chose que vous voulez être le plus en avant sur la écran.

Je viens d'avoir une période très difficile avec un problème similaire. (CSS Drop Down passe sous une bannière) je CSS pour éventuellement corriger, changé le div parent trouer l'ensemble nav à position:absolute et un z-index vraiment élevé, mais je testé cette et cela a fonctionné très bien.