geekswithblogs.net

Steve Clements

.Net and then some....


News



MCP

Add to Google
Add to Technorati Favorites



Subscribe to this Blog by Email


this is Steve's profile
Locations of visitors to this page

My Stats

  • Posts - 119
  • Comments - 98
  • Trackbacks - 52

Twitter












Tag Cloud


Recent Comments


Recent Posts


Archives


Post Categories


Image Galleries


Fav Blogs


Fav Places


Services!


Top Kudos


<< Developing Vista Sidebar Gadget | Home | MP3 player – which one?? >>

Flash swf object in html: z-index



Yesterday I came across a right little pain in the butt!  I found that swf objects display on top of all layers regardless of z-index.

I found the solution was to add this line in the markup.

<object type="application/x-shockwave-flash" data="/someMovie.swf" width="100" height="100">
  <param name="movie" value="/someMovie.swf" />
  <param name="wmode" value="transparent">
</object>

Problem is this doesn't work in firefox, does anyone have a cross browser solution to this???

Thx


posted @ Saturday, March 03, 2007 12:21 PM |

Comments

Gravatar # re: Flash swf object in html: z-index
Posted by Sean on 3/5/2007 10:40 PM
Steve,

You may want to look at setting specific z-index values on the object tag and the container element that it resides in using CSS. I ran in to this issue as well on a site where a top navigation menu was dropping behind a flash video.

I am using the swfobject javascript by Geoff Stearns (awesome bit of js) (http://blog.deconcept.com/swfobject/) to render the flash content. I also set specific z-indexes on the div containing the flash, and the menu items that were dropping behind it previously.

It seems to be working for me in Firefox 2.0.0.2 and IE 7.

Hope this keeps you from banging your head on the wall too much!

Sean
Gravatar # re: Flash swf object in html: z-index
Posted by reztart on 9/17/2007 11:50 AM
try to change "/someMovie.swf" to "someMovie.swf" when works in firefox for me =)
Gravatar # re: Flash swf object in html: z-index
Posted by Paul on 3/26/2008 4:18 PM
just to add to Sean's post, to make sure it works be sure to set:
so.addParam("wmode", "transparent");
on your swfObject to get z-indexing to work, even if you don't need your swf to have transparency.
Gravatar # re: Flash swf object in html: z-index
Posted by Tony on 5/12/2008 10:42 PM
I first set my menu container to z-index:2 (in a masterpage) and the contentplaceholder (.net website) container div to z-index:1. Nothing changed until I did what Paul said and added wmode transparent in the swfobject javascript. The flash movie is in the contentplaceholder and it was covering my menu.

Not no more. :) Good call Paul.
Post a comment





 

Please add 1 and 5 and type the answer here: