CODEWITHSUNDEEP
internet-explorer-8z-index
user814300
user814300

Reputation: 11

IE8 z-index glitch - cant seem to find a working solution

I have tried all the suggestions on here I just can't seem to get mine to pop-up in front of my stylesheet in IE. Works in firefox and chrome. Here is a very basic example of my layout.

the website is gulfstreamdata dot com . If you add anything to the cart and then in the top-right click on "expand" it drops down whats in your cart, but in IE it pops-under the template. :( 

<div class="vmCartModule" style="position:relative; z-index:900; ">

<div id="dropdown" style="position:absolute; z-index:901;">

</div>

</div>

I tried making both z-index values the same and i tried making the outer div higher. Tried about everything I could think of in IE developer tools to no avail.

Upvotes: 1

Views: 459

Answers (2)

Jose Faeti
Jose Faeti

Reputation: 12294

Anyway since it is positioned in a position you know, maybe you could detach it from the parent div, and move it after its actual parent div, so it will be drawn on front (also removing the z-index values).

<div class="vmCartModule">

</div>

<div id="dropdown" style="position:absolute; z-index:1;">

</div>

you shouldn't have problems in positioning it relative to the body, since it's on top right of the site.

EDIT

If it pops under your template, move that div to the bottom of your website, maybe right before </body>. I had the same issue with many menu and sub menus and it always worked perfectly.

Upvotes: 1

Ahsan Rathod
Ahsan Rathod

Reputation: 5505

Do this: 

<div id="dropdown" style="position:absolute; z-index:901;">
    //your content
</div>
<div class="vmCartModule" style="position:relative; z-index:900; ">
    //your content
</div>

See demo in IE8 : http://jsfiddle.net/WtWqX/8/

Upvotes: 0

Related Questions