How to Fix Wrong-sized SWFs in Firefox
Under certain circumstances, SWFs in Firefox display at the wrong size (usually too small) when their width and height attributes are set to a percent in HTML. There’s nothing wrong with using percents for width and height — as you’ve likely seen, “full screen” SWFs are a popular practice — but there is a wrong way to code for it. If you’ve run into this scenario, you’ll be happy to hear the solution is simple. This is neither a bug in Flash nor Firefox, as a matter of fact, and is resolved with a better understanding of HTML.
An answer, short and sweet
Check your HTML in the document that contains your SWF. Is there a document type declaration (DOCTYPE) at the top? If so, that’s the source of the erroneous display.
Now wait! Don’t delete that DOCTYPE just yet. Sure, you can remove that line, and if you do, your SWF will display at the expected size in Firefox, but DOCTYPEs are a good thing. By removing the DOCTYPE, you’re putting your browser into so-called “quirks mode,” which means that any HTML in the document will be interpreted not according to W3C standards, but according to the whim of whoever built the browser you’re using. You might compare this to ignoring the Oxford English Dictionary in favor of an arbitrary dictionary written by a local literary club. Sooner or later, one or more word definitions will veer from what’s officially correct, and you may end up with your foot in your mouth. See http://www.alistapart.com/articles/doctype/ for more details.
Current best practices strongly recommend coding to standards, so let’s do that, instead. And let’s do it quickly, while this answer is still “short and sweet.” 
Add the following <style> element to your HTML document. Put it inside the <head> element, as follows.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Percent-based SWF</title>
<style>
html, body { height: 100%; }
html { overflow: hidden; }
</style>
</head>How it works
The <style> element lets the browser know that some or all of its styling choices will be determined by CSS (Cascading Style Sheets), which actually means determined by you. Apparently, the DOCTYPE for XHMTL 1.0 (and others, as you’ll see) dictates that 100% height doesn’t always apply. To let the browser know how you would like things interpreted, supply the above two lines of CSS. The first tells both the <html> and <body> elements to set their own heights to 100%. (If this begins to sound like a circular argument, don’t worry — it does to me, too.) In essence, this “opens up” the document’s overall height to allow room for internal elements to do the same. The second line corrects a side-effect of the first line. Leave it out to see what I mean.
Variations
If you’re going for a 100%-sized SWF, you probably want to get rid of the natural HTML page margins while you’re at it.
<style>
html, body { height: 100%; }
html { overflow: hidden; }
body { margin: 0; }
</style>
September 29th, 2006 at 5:23 am
Nope, still too small, but has the added drawback of also removing the vertical scroll bars…
Doesn’t work for me I’m affraid
September 29th, 2006 at 12:27 pm
Andy,
With a full-browser SWF, you wouldn’t need the scrollbars, of course.
What platform are you on? I’ve used the above approach for dozens of websites.
December 13th, 2006 at 1:27 am
This is highly useful. Unfortunately some web developers till do not care about the Firefox users. This just one of many problem . Hope they will learn from you at least
Don Lapre is a Superstar
webmaster@j-ams.org
www.j-ams.org
February 5th, 2007 at 11:50 am
Hi David,
I have the same problem as Andy – initially I placed the code in my external style sheet… didn’t have any effect, so to try again I placed the style code directly into the head of my html page which holds the swf file… still no joy.
I’m testing my ste on a Dual Core Mac, OS X 10.4.
Regards Jonny
February 8th, 2007 at 3:36 pm
Thanks for the tip on fixing my Firefox problem. Andy could fix his lack-of-scrollbars problem by changing the style
html { overflow: hidden; }
to
html { overflow: shown; }
worked for me.
February 8th, 2007 at 7:59 pm
Jeremy,
Glad to help.
One note about your CSS comment. The
overflowproperty has a handful of possible values, but, for better or worse, “shown” isn’t one of them. Different browsers handle things differently, of course, but my guess is that the “shown” is ignored and that browser’s default behavior is followed, same as if theoverflowproperty hadn’t been specified.February 9th, 2007 at 10:56 am
oops!
that was a mistake of accidently mixing some javascript I wrote with css and making nonsense.
Instead, removing the { overflow: hidden } fixed my page, like you said, reverting to the default behavior. I needed to to this since I have a shockwave file of a map that exists among some other text and such –not just a full page Flash site.
February 15th, 2007 at 12:30 pm
David,
Thanks for your help with this. I’ve solved my problems using SWFobject in conjunction with CSS, works so well I’ll be applying this to every flash site I produce from now on!
I have 3 to do in the next 3 months so a lesson well learnt for me!
And SWFobject – what a perfect solution to the ever present problems of different browsers with different Flash plugins.
Thanks again.
Jonny
February 15th, 2007 at 2:58 pm
Glad to hear it, Jonny!
March 15th, 2007 at 1:34 pm
Thanks David.
I’ve been trying to sort that out for ages! I was starting to get desparate!
Works perfectly!
April 15th, 2007 at 5:08 am
I haven’t tried it with firefox yet, but this fixed the same problem in Opera. Thanks a lot David.
November 25th, 2007 at 9:56 am
Hi david,
Thanks for this. If I hadn’t of found this blog it might have taken me months to find the solution. Now I can get on with developing our band website.
November 27th, 2007 at 12:39 am
To David …
Sure thing!
To Jim …
Glad it worked for you, man.
December 8th, 2007 at 11:41 am
Hi,
I briefly thought this was going to be the answer to my problem, unfortunately, it doesn’t work for me though. SWF is still displayed at the same (tiny) size, this workaround doesn’t seem to make any difference.
Sadly, the only thing that does work is to delete the DOCTYPE - exactly what I want to avoid. I’ve tried various DOCTYPES but none of them work for Firefox.
January 23rd, 2008 at 3:44 pm
This saved my from a huge headache. I owe you one!
January 23rd, 2008 at 6:34 pm
Completely screwed my page up - won’t display in IE or FF
January 23rd, 2008 at 8:12 pm
To Ryan …
Glad to hear it!
To Rod …
I can’t tell from your comment if you think it was your own effort or the suggestion in this article that screwed you up, but I’ll be happy to take a look at your site. What’s the URL?
April 3rd, 2008 at 11:09 pm
[Followup on Kirsty …]
Kirsty and I touched bases via email, but she ended up getting pulled onto other projects, so her case might just be a mystery. Good to have one of those every now and then.
I hope you did manage to find a useful solution, Kirsty. Write back any time!