Zyklus IE7 -Schicht

Question

Ich habe ein Problem mit einem kleinen Div, das über Bilder "schweben" sollte, die mit dem JQuery Cycle -Plugin wechseln. Die Bilder sind 950px breit und rechts oben auf den Bildern sollte eine kleine Schachtel mit den neuesten Nachrichten sein.

Das Problem liegt im Kompabilitätsmodus in IE Die Box scheint den Z-Index zu verlieren und landet hinter dem Bild. Es funktioniert in IE8, Oper, Chrome und Firefox.

Ich habe versucht, 2 Bilder zu entfernen, damit nur 1 Bildshows und dann aus irgendeinem Grund auch in CompabilityMode funktioniert. Ich habe versucht, Weiße zwischen den IMG-Tags zu entfernen, aber kein Glück, Rand: 0; Polsterung: 0 überall, aber kein Glück

Hat jemand irgendwelche Ideen, was könnte falsch sein?

CSS -Code

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

JavaScript -Code

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

HTML Quelltext

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

• Gelöst - zusätzliche Notizen*

In allen Browsern, aber IE7 müssen Sie beispielsweise oben: 0 angeben; Links: 0 Wenn Sie Position verwenden: Absolut. Sonst endet es normalerweise rechts auf der Website. Eine andere Sache, die keinen Sinn macht, wenn es um IE7 geht.

Answer 1

Setzen Sie Ihren #NewSwrapper als einen höheren Index als #NewSlisting ein

Das sollte funktionieren

Ich habe auch den Code für den Zyklus nicht angesehen, aber ich gehe davon aus, dass er höhere Z-Index als 12 verwendet. Sie werden wahrscheinlich verwenden möchten z-index > 1000 für etwas, das Sie am dringendsten auf dem Bildschirm sein möchten.

Ich hatte es einfach sehr schwer mit einem ähnlichen Problem. (CSS -Drop -Down -Gehen unter einem Banner) Ich habe CSS verwendet, um es schließlich zu beheben, den Elternteil geändert div Das ganze NAV anbohrt zu position:absolute Und ein wirklich hoch z-index Aber ich habe getestet Dies Und es hat wirklich gut funktioniert.