Firefox - setting overflow hidden on DIV does not clip flash-object - CSS forum at WebmasterWorld

:(
I can't get Firefox to clip the embedded Flash object when contained in a DIV.
The DIV element has overflow:hidden so it should be pretty straightforward.

It works fine in IE, and I can't see what's wrong - neither WHY Firefox should overflow in this case nor anything else I can do. Using EMBED-element as well (as in old Flash satay) makes no difference. I'm looking at SWFObject embedding too.

Searching Google and sites for hours returned no solution, nor specific mention of this exact problem, albeit there are quite a number of mentioning of Firefox and overflow - but not in the context of clipping Flash. Searching for overflow+hidden+clip+flash on this site only gives 2 results, but none pertaining to FF.

Anyone have some pointers on this? :)

Here's the minimal testcase:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Testing - firefox flash overflow clipping.</title>
</head>
<body>
<div style="width:200px; overflow:hidden; border:1px #00ff00 solid;">
<object type="application/x-shockwave-flash"
 data="http://www.youtube.com/v/AgEmZ39EtFk" width="400" height="300">
<param name="movie" value="http://www.youtube.com/v/AgEmZ39EtFk" />
<param id="fv" name="FlashVars" value="val=test" />
</object>
</div>
</body></html>

PS! the flash movie linked is non-offensive (a small kitten falling to sleep), but any Flash file would suffice. I thought a testcase which is immediately runnable for anyone was better though.

Firefox - setting overflow hidden on DIV does not clip flash-object

complete minimal testcase included, works fine in IE

Blackbeered

Blackbeered

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week