I have a banner <div> with an enclosed image and a menu. The banner
is position: relative and the image and menu are position: absolute
with z-index set so the menu will be on top of the image.
The problem is when the image is replace (via javascript) with flash
content it no longer is below the menu, and instead will cover the
menu.
<div id="banner">
<div id="flash">
<img src="..." />
</div>
<div id="menu">
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</div>
</div>
I have z-index on the flash and menu <div>s, so on small windows the
menu will be on top of the image.
Now, I'm using SWFObject v1.4[1] which detects if flash is installed
and then updates <div id="flash"> with the <embed> or <object> by use
of innerHTML.
When the Flash movie is replaced the z-index no longer seems to work
-- that is, on narrow windows the flash content is on top of the
"menu" instead of the other way around.
Here's the javascript -- on page load you call the write() method
passing in the id of the div (i.e. "flash" in the example above).
You can see that's it's just doing:
n.innerHTML = this.getSWFHTML();
where getSWFHTML simply returns the <object> or <embed> text.
I've even tried adding class="z-index: 1;" inline in the <embed>
with no difference.
Any idea why the z-index no longer works, or better, how to make it
work? I want the menu to be on top of the flash media.
[1] http://blog.deconcept.com/swfobject/
Thanks,
--
Bill Moseley
[EMAIL PROTECTED]
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
