HTML div display on top of Flash Object

I have a flash slideshow with 2 divs overlaying it, 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>

Both overlay properly in Firefox/Safari/Chrome, but nothing I try seems to make it work in IE. I'm using Remy Sharp's HTML 5 enabling script to make the HTML5 mark-up work in lower versions of IE. What's funny is that the second div, #intro overlays correctly, but #top-menu always appears behind the` slideshow.

All 3 elements are absolutely positioned with z-indexes explicitly set. No matter how high or low I set them the flash object is always in front of the #top-menu element.

I have checked the rendered <param> tags and one of them lists wmode as transparent.

The flash o开发者_StackOverflow社区bject is dynamically inserted with php through a CMS, so I have no access to the <embed> tag that many have suggested adding the transparent attribute to.

<div class="wrapper" style="position:relative;width:50px;height:200px">
    <div class="swf">
        <object type="application/x-shockwave-flash" data="http://www.xxxxxxxxxxxxxx.com/catwalk/flvplayer_novolume_crop_runway7.swf?autoStart=false&file=../catwalk/movies/379_6.flv&repeat=true" width="50" height="200" wmode="transparent">
        <param name="movie" value="http://www.xxxxxxxxxxxxxx.com/catwalk/flvplayer_novolume_crop_runway7.swf?autoStart=false&file=../catwalk/movies/379_6.flv&repeat=true" />
        <param name="wmode" value="transparent" />
        </object>
    </div>
    <div class="bottom" style="position:absolute;border:1px solid #333;background:#fff;width:50px;height:25px;bottom:15px">bottom</div>
    <div class="top" style="position:absolute;border:1px solid #333;background:#fff;width:50px;height:25px;top:47px">top</div>
</div>

Simply experiment with the bottom:15px and the top:15px - and then remove the border and style the box as you wish. the object code above is not recommend as I am just typing a quick solution for you.

Simply experiment with the bottom:15px and the top:15px - and then remove the border and style the box as you wish. the object code above is not recommend as I am just typing a quick solution for you.

A live example for you, notice the top box over the video: http://www.xxxxxxxxxxxxxx.com/x.php