Question

I have a problem using a small div that should “hover” over pics that switches using the JQuery cycle plugin. The pictures are 950px wide and to the right on top of the pictures a small box should be with latest news.

Problem is in compability mode in IE the box seems to loose it’s z-index and ends up behind the picture. It works in IE8, Opera, Chrome and Firefox.

I’ve tried to remove 2 pictures so only 1 picture shows, and then for some reason it works in compabilitymode aswell. I’ve tried to remove whitespaces between the img-tags but no luck, margin: 0; padding: 0 all over but no luck

anyone got any ideas what might be wrong?

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 Code

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

• SOLVED – ADDITIONAL NOTES*

In all browsers but IE7 you need to specify, for example, top: 0; left:0 if you are gonna use position: absolute. Else it usually ends up right of site. Another thing that doesnt make sense when it comes to IE7.

Answer 1

Put your #NewsWrapper as a higher index than #NewsListing

That should work

Also, I haven’t looked at the code for Cycle but I’m assuming it uses higher z-index than 12. You’ll probably want to use z-index > 1000 for something you want to be the most forward on the screen.

I just had a really hard time with a similar issue. (CSS Drop Down going underneath a banner) I used CSS to eventually fix it, changed the parent div holing the whole nav to position:absolute and a really high z-index but I tested this and it worked really well.