On a number of the Flash forums I visit regularly I have noticed that questions seem to appear cyclically. One of the current hot topics is “Why is my movie is broken in Firefox?” In almost every case the problem is the same — that the movie appears far too small — and it relates to the use of percentage dimensions.
The problem in reality has nothing to do with the movie itself, it is caused by the markup produced by Flash to display the movie in a page. It first started because of a change in this markup introduced by Flash MX2004. Prior
to MX2004 Flash had churned out some fairly untidy non-standard markup, however with MX2004 Macromedia decided to clean
things up a bit. Out with the old non-standard markup and in with some new non-standard markup with added /’s
for XHTML “compliance”. As part of this move to
XHTML a DOCTYPE declaration was also included in
the page to inform the world that the page was written using XHTML (ooh, it has an “X” in it so it must be better!)
The use of a DOCTYPE is significant — most modern web browsers use the presence of a valid DOCTYPE
to decide how they will render the page. The logic being that a page containing a DOCTYPE should have been written according to the standard
it claims to be. Hence the browser will try to render it more strictly according to the standards, whilst other pages will be rendered
more leniently using what is commonly known as “Quirks mode”. In quirks mode the browser attempts to emulate the behaviour of
older non-standards compliant browsers in order to retain backwards compatibility.
The problem arises when Mozilla/Firefox is in it’s strict rendering mode and we want to specify the height of an element as a
percentage. According to the specs the percentage height should be calculated based on the height of the containing
element, which in the case of the code produced by Flash is the body of the page. In quirks mode the body would automagically
stretch to fill the entire viewport and as a result so would the Flash movie. However according to the standards
the body should only resize to fit the content it contains — and this what Mozilla tries to do when it renders the page in it’s standards compliant mode.
So the Mozilla rendering is technically correct (The best kind of correct
) albeit slightly annoying as
other browsers seem to treat this as a special case even when in standards mode.
Clearly one option would be to simply remove the DOCTYPE to cause the page to be rendered in
quirks mode again just like the pages created by versions of Flash prior to MX2004. However standards mode does
have advantages since (in theory) we should be able to guarantee consistent rendering across future generations of the different
browsers.
To get the desired effect in standards compliance mode we need to manually make sure that the body does fill the viewport.
We can do this with a little bit of CSS by inserting the following somewhere in the head
of the page,
<style type="text/css">
html, body {
margin: 0; padding: 0;
height: 100%;
}
</style>Notice that the rule is applied to both the body and html elements, the reason for this is simple — just like we needed to explictly set the height for the parent of the Flash movie, we have to do the same thing for the parent of the body. Once this is done Firefox should display the movie at the intended size.
Permalink. Posted on 10th January 2005 in Browsers, Flash.
Excellent. This is exactly the info I've been needing. Thanks.
# Posted by Susan Litton on 20th November 2005.
Hello, I have gone to W3 and had my html validated, but firefox is still not working with some simple javaScript while explorer is. I just want the browser window to close "onClick". it is very simple script, to wit: <a href="#" onclick="javascript:window.close()"><u>Close Window</u></a> W3 says it's fine and good but firefox doesn't respond at all. In my firefox preferences, JavaScript is enabled and flash works fine too. Any more resources?…
Hi Alexander,
You don't need the javascript: inside the onclick event handler, it should just be
<a href="#" onclick="window.close();">Close Window</a>
Wow, you're a real life saver!
The latest weekly builds of Opera (tested in build 8359) seem to treat this in the same way as Mozilla/Firefox now.
Having an issue with Flash and IE. It actually works in Firefox 1 (but not 2). Basically, when I go to my file on my server (http://www.progressivemultimediaproductions.com/images/ghetto.html)
In IE the video is showing automatically in it's full screen mode, and will not resize. In Firefox 1, it works great, in Firefox 2, it's broke just like in IE. I am lost, and am more than willing to post my code or send someone an fla file to see where I am making my mistakes. Thanks in advance.
Sorry, comments for this item are currently closed.
