1. Home
2. Developer Center
3. Dreamweaver Developer Center
4. CSS Advisor

CSS Advisor

Full-Height Flash Bug

Problem

A Flash movie with a height of 100% will not fill the available browser's space unless its parent container's height is also set to 100%.

Solution

Set height of parent container (html, body or containing p/div) to 100%.

Detailed description

Dreamweaver recently corrected its doctype insertion, which means many developers now (finally!) use correct doctypes, complete with a URL to the relevant DTD. Across the board, this means stricter formatting, which is a good thing. In Mozilla browsers however, it means that fullscreen SWFs no longer render correctly.

By fullscreen SWFs, this refers to SWFs whose width and height attributes are set to 100% in the HTML's object/embed elements. With valid doctypes in place, browsers such as Firefox and Netscape show fullscreen SWFs at roughly one fifth the size they ought to be: they look like postage stamps when they should fill the whole viewport.

Advice is often given to simply delete the doctype. While quirksmode does visually "fix" the issue, the price paid is.... well, quirksmode. This isn't the best solution. The following CSS rule corrects Mozilla's interpretation, in spite of the doctype.

<style>
   html, body { height: 100%; }
</style>

(Reported by David Stiller)

Text ID: FULL_HEIGHT_FLASH

---