CODEWITHSUNDEEP
flashinternet-exploreroverlay
user1997781
user1997781

Reputation: 1923

HTML overlay on Flash in IE 10+

I'm having an odd problem with overlaying text in a DIV on top of a Flash object. I know that the WMODE parameter is the key for IE 9 and below, and I was able to get it working fine in FF, Safari, IE 8 and 9, etc. with this code (I'm not using z-index or anything in my CSS, just absolute positioning):

<!--[if IE]>
<object width="960" height="280" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
   <param name="movie" value="/assets/flash.swf">
   <param name="wmode" value="opaque">
<![endif]-->

<!--[if !IE]>-->
<object width="960" height="280"
        data="/assets/flash.swf"
        type="application/x-shockwave-flash">
<!--<![endif]-->
    <img src="image.jpg" />
</object>
<div class="copy-left" >
    <h2 style="color:#FFFFFF">Title</h2>
    <p style="color:#FFFFFF">Text 2</p>
</div>

But for some reason in IE 10 and 11, the div appears behind the Flash movie, not on top of it...as if the WMODE doesn't matter at all and the object still wants to appear on top of everything.

I'd appreciate any ideas, I'm stumped.

Upvotes: 0

Views: 1814

Answers (1)

user1997781
user1997781

Reputation: 1923

It turns out that IE 10+ doesn't pay attention to conditional comments, so the wmode was being ignored.

I fixed it by adding <param name="wmode" value="opaque"> to both objects, regardless of whether they were IE or not. The final code is this:

<!--[if IE]>
<object width="960" height="280" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
   <param name="movie" value="/assets/flash.swf">
   <param name="wmode" value="opaque">
<![endif]-->

<!--[if !IE]>-->
<object width="960" height="280"
        data="/assets/flash.swf"
        type="application/x-shockwave-flash">
        <param name="wmode" value="opaque">
<!--<![endif]-->
    <img src="image.jpg" />
</object>
<div class="copy-left" >
    <h2 style="color:#FFFFFF">Title</h2>
    <p style="color:#FFFFFF">Text 2</p>
</div>

Upvotes: 1

Related Questions