title: IE7 nested div display bug
body: <p>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?</p>
  
  <pre><code>&lt;div id="shadowLayer" style="display:none; z-index:2001; position:fixed; width:100%; height:100%;&gt;
  &lt;div id="MessageLightbox" style="display:none; z-index:3001; position:absolute;&gt;  
  &lt;iframe&gt;&lt;/iframe&gt;
  &lt;/div&gt;
  &lt;div id="RecordLightbox" style="display:none; z-index:4001; position:absolute;&gt;
  &lt;iframe&gt;&lt;/iframe&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  $('#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');
  </code></pre>