Firefox, hover-flow hidden, and flash

So, you have noticed that Firefox doesn’t handle the “overflow: hidden” very well with flash elements. I know, you maybe have a fancy slideshow that is working perfect with images and other elements, but when you try to add some videos everything goes crazy . Well don’t desperate, the solution is easy.

Your code right now looks something like this:

<object  width="500" height="300" ... >
  <param name="movie" value="matrix.swf" />
  <param name="quality" value="high" />
  ...
  <embed src="matrix.swf" width="500" height="300" quality="high"  ... ></embed>
</object>

To work around this, you only need to use the wmode=”opaque” parameter. This will give the flash movie a stacking order

<object  width="500" height="300" ... >
  <param name="movie" value="matrix.swf" />
  <param name="quality" value="high" />
  <param name="wmode" value="opaque" />
  ...
  <embed src="matrix.swf" width="500" height="300" quality="high"  ... ></embed>
</object>

You also may use the wmode=”transparent” which not only allows us to stack elements but also makes the background of the flash movie transparent.

Entry posted on February 17th, 2009 at 19:08 under Browsers, CSS, Flash.
Follow any responses through the RSS 2.0 feed , leave a response, or trackback from your own site.