Ciclo IE7 Capa

Question

Tengo un problema para usar un pequeño div que debería "pasar" sobre fotos que cambian usando el complemento de ciclo jQuery. Las imágenes tienen 950 px de ancho y a la derecha, encima de las imágenes, una pequeña caja debe ser con las últimas noticias.

El problema está en modo de compabilidad en IE, el cuadro parece perder su índice Z y termina detrás de la imagen. Funciona en IE8, Opera, Chrome y Firefox.

He intentado eliminar 2 imágenes, por lo que solo se muestra 1 imagen, y luego, por alguna razón, funciona en CompabilityMode también. He tratado de eliminar los espacios en blanco entre las etiquetas IMG pero sin suerte, margen: 0; relleno: 0 por todas partes pero no hay suerte

¿Alguien tiene alguna idea de qué podría estar mal?

Código 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;
}

Código JavaScript

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

código 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>

• Resuelto - notas adicionales*

En todos los navegadores pero IE7, debe especificar, por ejemplo, arriba: 0; Izquierda: 0 Si vas a usar la posición: Absoluto. De lo contrario, generalmente termina directamente del sitio. Otra cosa que no tiene sentido cuando se trata de IE7.

Answer 1

Pon tu #Newswrapper como un índice más alto que #NeWSlisting

Eso debería funcionar

Además, no he visto el código para el ciclo, pero supongo que usa un índice Z más alto que 12. Probablemente querrás usar z-index > 1000 para algo que desea ser el más avanzado en la pantalla.

Pasé muy difícil con un problema similar. (CSS desplegando debajo de un banner) Usé CSS para solucionarlo, cambié el padre div perforando todo el navegador a position:absolute y un muy alto z-index Pero probé este Y funcionó muy bien.