IE Z-INDEX Issue

Issue: Slideshow

Details: There's a frame (which is just a transparent PNG around the slideshow)

What I'm trying to do: Make the frame over the image and caption background but make the link and nav-balls on top of the png.

It works like I want in other browsers except for IE. I read more on the z-index bug for IE but that didn't help. Any suggestions or help is VERY v开发者_运维技巧ery much appreciated.

Issue resolved.

To make navigation dots clickable, apply styles:

display:block; position:relative; // to frame

z-index:1001; //to .nivo-controlNav

To learn more link i suggest:

1) delete all z-index property that applies to .nivo-caption

2) add shadow div with z-index: 87 /*(87 for example)*/ below frame

The issue for this is that IE don't follow the z-indexing of an image, no matter how small or big the z-index you put in your image, IE will still follow the hierarchy level of the elements. If you really want to use z-indexing of an image in IE, you can wrap the image inside a div and put the z-index on the div, this will follow the right z-indexing on all browsers including IE.

// will not follow in IE
<div>first div</div>
<img style="z-index: -1;" src="image.png" />
<div>my div</div>

// will follow in IE
<div>first div</div>
<div style="z-index: -1;"><img src="image.png" /></div>
<div>my div</div>