Home

z-index Flash Objects Thickbox Fix

PostDateIcon Wed, 2007/09/12 - 18:01 | PostAuthorIcon phil

I had an issue with thickbox where it would show the image behind a flash video in FireFox. IE7 worked great. I ran across Sheriar Designs Blog posting a fix specifically for DHTML menus over a flash video. I figured I would give it a try and much to my surprise, the suggestion worked! I give ALL CREDIT to the author of the blog, Mani (Pronounced like Bonnie, not Mani like Danny)

I merely wanted to blog the information for my own record keeping, plus to help 'index' the solution for others.

Mani's Solution
  1. Wrap your flash content in a div
  2. Add <param name="wmode" value="transparent"> to your object tag
  3. Set wmode="transparent" in the embed tag
  4. Use css to set the position and z-index for your div (don't set negative z-index values as it will make your flash disappear)
The CSS

#flash {
position: relative; /*or absolute*/
z-index: 0;
}

The XHTML

<div id="flash">
<object ...>
  <param name="wmode" value="transparent">
  <embed ... wmode="transparent">
</object>
</div>

And, in Mani's words... That's It!

PostCommentsIcon Add new comment

great -- thank you so much

Submitted by karl07 (not verified) on Fri, 2010/07/02 - 01:47.

encountered this problem every now and then - and now i could solve it. thanks!

karl

Great stuff

Submitted by santhosh (not verified) on Wed, 2010/06/16 - 05:55.

perfectly working... thanks

flash over thickbox

Submitted by siddharth rc (not verified) on Mon, 2010/02/01 - 00:31.

works like butter dude ...
good goin Mani

THANKS!

Submitted by Magnus (not verified) on Mon, 2009/10/12 - 07:45.

Perfect. Exactly what I needed!

thank you for the solution, I

Submitted by nick (not verified) on Fri, 2009/07/31 - 08:49.

thank you for the solution, I had the same problem and it works perfectly.

Thnx man.. :D i was having

Submitted by Ros Sandstorm (not verified) on Thu, 2009/07/16 - 04:29.

Thnx man.. :D i was having trouble fixing it.

Worked perfectly...Thank you!

Submitted by Anonymous (not verified) on Sun, 2008/06/08 - 11:21.

I had the same problem - except that it was working fine in Firefox, but not in IE7 (go figure). Anyways the fix you suggested worked like a charm. Thank you!

Yay! That works great! I get

Submitted by Steven Hambleton (not verified) on Fri, 2008/10/10 - 09:47.

Yay! That works great! I get an outline around the flash movie when I hover over it though although it disappears when I click on it.

Well done :)

Cool!

Submitted by KP (not verified) on Mon, 2009/01/26 - 14:38.

Wow!!! Great stuff!!! Thanks a lot!!!

grazie.

Submitted by Anonymous (not verified) on Fri, 2009/03/06 - 16:36.

Ottimo funziona perfettamente. Grazie. Ivan (Italy) (Translate via Google)

Thaaaaanks. Worked great.

Submitted by Manuel Rico (not verified) on Tue, 2009/03/10 - 18:35.

Was looking for a solution for that problem for a while. You solved it.

Check this out, worked for

Submitted by andi (not verified) on Sat, 2009/03/21 - 18:56.

Check this out, worked for me and is a link from http://jquery.com/demo/thickbox/

http://www.communitymx.com/content/article.cfm?cid=E5141

cheers

Thank you so much. Nice work.

Submitted by Akhil (not verified) on Sun, 2010/04/11 - 21:40.

Thank you so much. Nice work.

The Wichita Computer Guy is hosted by one of the best hosting companies on the market: Hostgator.com. Not only do they provide unlimited domain addons, subdomains and parked domains, they also offer unlimited databases, unlimited hosting space and unlimited bandwidth! We have been using Hostgator for several years now and had great customer service support and almost 100% uptime. If you are looking for a website hosting company that provides everything you need for a powerful CMS based website, take a look at Hostgator.com!!

Site Menu
The Wichita Computer Guy | Copyright © 2010