0

I'm using SWFObject to embed a swf and it ends up covering some HTML components on the page. However the HTML is bleeding through on top of the flash movie.

I've played with wmode settings and z-index's, absolute vs relative positioning and nothing seems to work in firefox / safari. Chrome is working exactly as I would expect with wmode=window (the flash is always on top of HTML).

Any ideas how I can tell safari / firefox to keep their HTML behind the flash at all costs?

jckdnk111
  • 2,280
  • 5
  • 33
  • 43

2 Answers2

1

Do you have a link as an example for us?

Usually, you'll want a combo of:

wmode:'transparent'

and:

<div class="container">
    <div class="flash">Flash</div>
    <div class="html">HTML</div>
</div>

+:

.flash,
.html {
    position:absolute;
    z-index:2;
    width:200px;
    height:200px;
}
.html {
    z-index:1;
}

Though I'd like to see a link of the HTML escaping over the top of Flash in your situation.

EDIT:

Here's an example I put together, using SWFObject, to position Flash on top of HTML and using the above solution to have everything display as you'd expect: http://codefinger.co.nz/public/flash_atop_html/

Tested in Firefox, Safari, Chrome, IE.

danjah
  • 2,939
  • 2
  • 30
  • 47
  • Wasn't quite what I needed but it did get me in the right direction. I upgraded to the latest version of flash and then put the swf in a separate div with absolute positioning and it's own z-index. – jckdnk111 Feb 21 '12 at 03:27
1

It should work if you use wmode like below

    <object width="296" height="81"><param name="wmode" value="transparent" />
<embed src="yourFileName.swf" wmode="transparent" width="296" height="81" type="application/x-shockwave-flash" /></object>
Dips
  • 3,220
  • 3
  • 20
  • 21