[!]eXPlos[!]
New Member
I have this (simplified) DOM on my page:\[code\]<div id="Cover" style="display: none;"></div><div class="body"> <div id="header"> <div class="controlContainer"> <div id="FirstSelectorContainer"> <div id="FirstLink"><a href="http://stackoverflow.com/scriptlessfallback">Open Link</a></div> <div id="FirstLinkChoice"><a href="http://stackoverflow.com/test">I should be clickable</a></div> </div> </div> </div></div>\[/code\]\[code\]#Cover\[/code\] Has this CSS:\[code\]#Cover{ background-color: white; filter: alpha(opacity=50); opacity: 0.5; -moz-opacity: 0.50; z-index: 600; position: fixed; top: 0; left: 0; right: 0; bottom: 0;}\[/code\]\[code\]#FirstLinkChoice\[/code\] has this CSS:\[code\]#FirstLinkChoice{ width: 616px; height: 77px; position: absolute; right: 144px; border: 1px solid #424242; z-index: 800; background-color: white; padding: 4px; text-align: left; display: none;}\[/code\]This script adds a click event to \[code\]#FirstLink\[/code\]:\[code\]$(document).ready(function () { if ($("#FirstLink").length) { $("#FirstLink").click(function () { $("#FirstLinkChoice").show(); dimOn(); return false; }); }});\[/code\](dimOn, just activates the cover using the CSS \[code\]display\[/code\] property.)The desired outcome is when someone clicks \[code\]#FirstLink\[/code\] the cover goes over the page and the contents of \[code\]#FirstLinkChoice\[/code\] are available for selection. This seems to work fine for all browsers except for IE7, which puts \[code\]#Cover\[/code\] over the entire page including \[code\]#FirstLinkChoice\[/code\] despite the z-index being lower.What do I need to change to get this working in IE7? Unfortunately I am stuck with this nesting structure in production. I'm perfectly OK with a solution that is Javascript based (without javascript, the link will fall back to a page with similar info to the pop up) or special CSS just for IE7 as I will use a conditional stylesheet.