wmode and z-index

[philip]

Hi all

I was just updating my old SWFObject 1.5 examples to work with
SWFObject 2.0 when I came across an interesting phenomena. Perhaps
someone can explain it.

I was setting up a revised example of a suckerfish menu overlapping a
SWF; the long-standing workaround is to set the z-index in the CSS and
set the SWF's wmode to opaque. I created a dynamic publishing
version, and it worked fine in IE6, FF2 and Safari 3.1 (Windows). But
when I created my static publishing version, the menu wouldn't come in
front of the SWF in Firefox. IE6 and Safari 3.1 worked fine, but
Firefox loaded the SWF on top.

After playing with it for a while, I discovered that when I placed a
duplicate wmode param element in the nested object, Firefox behaved as
expected, with the SWF underneath the suckerfish menu.

<object id="flashcontent" classid="clsid:D27CDB6E-
AE6D-11cf-96B8-444553540000" width="550" height="400">
<param name="movie" value="/lab/_common/sample.swf" />
<param name="wmode" value="opaque" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="/lab/_common/
sample.swf" width="550" height="400">
<param name="wmode" value="opaque" />
<!--<![endif]-->
<p>Please update your Flash Player</p>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>

Links:
The z-index static publishing example: http://pipwerks.com/lab/swfobject/z-index/2.0/static.html
The z-index dynamic publishing example: http://pipwerks.com/lab/swfobject/z-index/2.0/dynamic.html

The updated SWFObject examples page, in case any of you are
interested:
http://pipwerks.com/lab/swfobject/

- philip

[Bobby]

For static publishing you need to duplicate all your param elements,
except the "movie" one. Quote from the documentation:

"NOTE: The nested-objects method requires a double object definition
(the outer object targeting Internet Explorer and the inner object
targeting all other browsers), so you need to define your object
attributes and nested param elements twice."

Mozilla based browsers actually use the inner object definition,
that's why it wouldn't work in your initial test case. Safari and
Opera can interpret IE's notation, that's why they will also use the
outer object element.

[philip]

OK, I just did some more searching in the group and see that this is a
known issue. Sorry I didn't search more thoroughly before posting, I
should know better. :)

And I just found this in the documentation:

"NOTE: The nested-objects method requires a double object definition
(the outer object targeting Internet Explorer and the inner object
targeting all other browsers), so you need to define your object
attributes and nested param elements twice."

Damn, I read that page over and over tonight and still missed it.
(but hey, it's 2am, I'm a little sleepy)

Thanks anyway!
- philip

[philip]

heheh, thanks bobby... i just caught that. sorry to make you repeat
yourself (again). thanks for all your work on this.

[Bobby]

Philip, we committed the same quote at the same time. You may do a
wish now ;-)