I have a flash slideshow with two overlapping divs - one at the top and one at the bottom.
<header>
<div id="top-menu">
<ul>
<li>Main Menu Link</li>
<li>Main Menu Link</li>
<li>Main Menu Link</li>
</ul>
</div>
<header>
<div id="content">
<div id="slideshow_wrapper">
<section id="intro">
<p>Introduction Text</p>
</section>
<section id="slideshow">
<!--dynamically inserted flash object-->
</section>
</div>
</div>
While both overlays function correctly in Firefox, Safari, and Chrome, I am encountering issues with Internet Explorer. Despite various attempts, I cannot get it to work in IE. I am utilizing Remy Sharp's HTML 5 enabling script to make the HTML5 mark-up compatible with older versions of IE.
Interestingly, the second overlay, #intro, displays properly, but the #top-menu always appears behind the slideshow.
All three elements are absolutely positioned with explicitly set z-indexes. Regardless of how high or low I adjust them, the flash object consistently remains in front of the #top-menu element.
I have inspected the rendered <param> tags and noticed that one of them includes wmode as transparent.
The flash object is dynamically inserted using PHP through a content management system, so I do not have access to the <embed> tag where others have suggested adding the transparent attribute.