How to Fix Wrong-sized SWFs in Firefox

Flash Web Development

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>

Leave a Reply