CODEWITHSUNDEEP
htmlcssinternet-explorerinternet-explorer-8z-index
Braunson
Braunson

Reputation: 717

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 very much appreciated.

Issue resolved.

Upvotes: 0

Views: 1652

Answers (2)

pmaruszczyk
pmaruszczyk

Reputation: 2155

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

Upvotes: 1

rob waminal
rob waminal

Reputation: 18419

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>

Upvotes: 1

Related Questions