At The Morphic Group we build Flex and ActionScript applications. This keeps us from the terrors of browsers and the various ways they interpret standards or disregard standards entirely. However, we cannot (yet?) avoid having to interface with the browser and HTML and CSS in at least one important manner. We still have to embed the .swf in an HTML page, and that puts us right in the middle of the madness.
This post is not original. Many others have posted about the Firefox "issue" regarding displaying content at 100% height. I'm just posting a reminder, and a Flex and SWFObject-specific version.
The "issue" is that in most cases you probably won't see the content or you may only see part of the content depending on the _actual_ height of the container of that content. When we build Flex applications they frequently are the only visible content in an HTML page, and the .swf itself is embedded in an otherwise empty <div> tag. The result is that if we've forgotten about this issue we're likely to wonder why we don't see the Flex application at all in Firefox. The reason is that Firefox is (apparently, from what I've read) compliant with the W3C specification for how to treat height. Apparently that specification says that when height is set to a percentage the height of the object should be a percentage relative to the height of it's container. This is the important part. If the container of the object doesn't have enough actual height then the content for which you've set the percentage will not display as you expected. Typically when we set the height to 100% we expect the content to occupy the entire height of the browser. If we haven't correctly configured the containers to have enough height we won't see anything showing up in Firefox.
The solution is to set the height of all the containers as well. Assuming that you're embedding the .swf in a div tag nested inside the body tag, which is itself nested in the html tag then you can use the following CSS to allow the content to really display at 100%.
html, body, div {
height: 100%;
}
We use SWFObject to embed Flex and Flash content, and we use the static publishing method with nested <object> tags. Therefore, the following is an example of a simple HTML page we might have to embed an .swf to 100% width and height in the browser.
<!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" lang="en" xml:lang="en">
<head>
<title>Flex Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.registerObject("flexApplication", "9.0.0");
</script>
<style>
html, body, div {
height: 100%;
}
</style>
</head>
<body>
<div>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
width="100%" height="100%" id="flexApplication">
<param name="movie" value="example.swf" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="example.swf"
width="100%" height="100%">
<!--<![endif]-->
<p>This site is best viewed as a Flex application, which requires
Flash Player 9. For users who prefer not to use Flash Player we have
provided a <a href=’textVersion.html’>text-only version
of the site</a/>.</p>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</body>
</html>
Thanks so much for this. I couldn’t for the life of me figure out why my Flex application wasn’t showing up at all in Firefox using swfobject but this did the trick nicely.
This was driving me crazy too. FF would render about 1/5 th of the page, but worked perfectly fine in IE. Thanks for the tip!