I am using jQuery's colorbox to open up an iframe on a page. On the page there are two flash SWFs. When I click the button that opens the colorbox, those flash SWFs appear over the top of my colorbox div. I've checked the CSS properties of the colorbox, and the overlay has position:absolute and z-index:999. I have given the SWFs a z-index:0 property, but they still show over the top of the colorbox. This happens in Firefox, IE, and Chrome.
views:
319answers:
2ive tried this but the flash is still showing over the colorbox.heres the code for one of my flash objects as it stands<object width="294" height="319" style="float:left; margin-left:0px; margin-top:20px; z-index:0; overflow:hidden;"><param name="movie" value="/flash/ZOFLORA_HOMEPAGE_BANNER.swf" wmode="transparent"><embed src='/flash/<umbraco:Item runat="server" field="SmallFlash"/>' width="294" height="319" style="z-index:0;"></embed></object>
phil crowe
2010-08-03 09:37:25
A:
Make sure your flash is using a window mode that supports z-indexing, such as transparent. This is defined when you start the flash using swfobject, or similar.
Almost certain that this will be the problem, but it could be that you've got the stacking order of the divs a bit confused. Remember that z-indexing isn't a global hierarchy, it takes the index from the parent element.
danp
2010-08-03 09:09:29
tried switching to swfobject but when i add wmode property to the param line visual studio says this is not a valid property of param. If i use it anyway the flash still shows over the colorbox. Ive added style="z-index:0;" to the object tag on both flashs and the div containing has z-index-1. these are the only areas on the site where z-index is used apart from the colorbox css where it is set to z-index:999 on every instance.
phil crowe
2010-08-03 12:05:38
Without doubt, the lack of a wmode parameter is what's causing the problem then. Visual studio shouldn't be complaining - perhaps update the code at the top with what you have with swfobject, and we can fix that.
danp
2010-08-03 17:27:07
also try adding this in, instead of what you have above: <param value="transparent" name="wmode">
danp
2010-08-03 17:28:24