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!
December 5th, 2008 at 6:03 pm
Thank you so much for addressing this, I’ve been dealing with this on multiple projects and it’s been killing me testing so many parameters and browsers!
March 23rd, 2009 at 12:59 pm
I’m just not getting anywhere with this. I’ve tried everything. I’ve tried this tutorial, I changed the publish settings to 100% as well as changed the size in the object tag in my html. I’ve tried the scale as ’showall’, ‘exact’ and even ‘noborder’ to get it to fit the screen depending on the resolution setting the viewer was using. I looked at several website tutorials including http://www.aleosoft.com/flashtutorial_autofit.html and http://www.moock.org/webdesign/flash/fillthewindow.html but NOTHING is working.
I’ve even redesigned my movie with the stage set at 1440×900 (which is what my resolution is at) and when I changed my resolution to say 1024×760 or even 800×600…it still looked the way it looks when you view it. The top and bottom banners dont’ go all the way to the edges and neither does the blue lines that fly in.
The page is www.swdirect.com/flash.html This is the look my employers want for their site, which is why I have it at the flash.html addy. No links work yet.
Can you help me figure this out?? Thanks!
May 8th, 2009 at 10:06 pm
PLEASE HELP !?!
I am so pulling my hair out. I thought maybe this would work but no.
FF 3.0.10 is NOT listening to the specific sizes of SOME flash I have. Some is fine… same code copied for next… and its not. only diff is html or php page extension.
http://www.magicwebs.com/portfolio_iconverse_test.php click the iconverse logo or text link for the 600×400 popup…. in which a 600×400 flash movie should play…. but it doesnt. It plays but it is bigger than 600×400 by 100px at least. I had a sniffer… took it out. changed page name to html instead of php…. resaved movie to make sure it is 600×400. STILL display larger than the popup. Rediculous. This was never so until FF came on the scene. FF seems to be real buggy. PLEASE I BEG OF YOU. HELP!!!
May 12th, 2009 at 1:25 pm
To Nicholas …
Glad to hear it!
To Angela …
This is a late reply (sorry!), so I realize that you may have already solved your problem by now. In case you still need help, though, I currently have a bit of time to work through this with you.
At the moment, your URL shows an HTML document without a DOCTYPE statement — without even a <head> tag — and no CSS at all. Given that configuration, and the SWF’s width and height set to 100%, your Flash content displays the way I would expect; that is, it reaches to the edges of the browser, minus a natural margin around the perimeter.
Let me know how you’d like this to display, and I’ll see if I can help!
To tom …
This may not help you any, but when I test your popup in Firefox 3.0.10, I see Flash content that displays at exactly the right size, 600×400. As it turns out, you shouldn’t need percentage-based width or height in this particular situation. The popup window itself is approximately 600×400, and you should be fine with actual pixel-based dimensions, as you’re currently using.
August 2nd, 2009 at 1:47 pm
i hope you can help me with putting SWF with content below on a single page with scroll:
again, the SWF file needs to be above written contnet:
and at this moment, in IE - works fine. with FF, i can see the written content but the SWF is very small for some reason.
with or witout the DOCTYPE the problem exists! i don’t know what to do anymore even though i tried what you’ve written here…
August 24th, 2009 at 4:47 pm
i’m still waiting for help in the above issue. do i need to change the intire code? or shoul i change onli the SWF. file code?
thanks in advance
August 24th, 2009 at 6:36 pm
tzvi / מיתוג,
Sorry for the delay. When you originally posted on August 2nd, I wasn’t sure (and am still not sure) what URL you’re talking about. Are you saying you want the SWF to appear at a width and height of 100%, yet still scroll?