CODEWITHSUNDEEP
jquerycssinternet-explorer-7
Justin
Justin

Reputation: 1

IE7 nested div display bug

I have 2 alert boxes inside of a "shadow" layer I use to cover the rest of the page. When a user clicks a button, I show the shadow layer and the appropriate alert box. when they finish, I hide both those divs. This works great in all browsers except IE7, where if you open one alert box, close it, then open the other, both alert boxes show. How can I get around this issue?

<div id="shadowLayer" style="display:none; z-index:2001; position:fixed; width:100%; height:100%;>
<div id="MessageLightbox" style="display:none; z-index:3001; position:absolute;>  
<iframe></iframe>
</div>
<div id="RecordLightbox" style="display:none; z-index:4001; position:absolute;>
<iframe></iframe>
</div>
</div>

$('#shadowLayer').css('display', 'block');
$('#RecordLightbox').css('display', 'block');

$('#shadowLayer').css('display', 'none');
$('#RecordLightbox').css('display', 'none');

$('#shadowLayer').css('display', 'block');
$('#MessageLightbox').css('display', 'block');

$('#shadowLayer').css('display', 'none');
$('#MessageLightbox').css('display', 'none');

Upvotes: 0

Views: 1394

Answers (1)

clamchoda
clamchoda

Reputation: 4941

Its a bug in IE. Try some recomendation off of google for work arounds with nested div's.

Try the link "The IE 'non-disappearing content' bug"

from

http://www.positioniseverything.net/explorer.html

Upvotes: 1

Related Questions