Sometimes you need to have a full browser screen filled with a swf. Everyone knows how to do that. You go into Publish Settings, set Dimensions to “Percent” and Width and Height to 100.
The problem is that you still end up with a margin around the edge of the page. So you dive into the HTML and add in something to change the margin and padding to 0 for the body.
That works fine on many browswers, but on Firefox, maybe Mozilla too, it is totally broken. The Flash only fills about 100 pixels or so at the top of the page. After searching around, I found that Mozilla is very strict about its percentages. You are telling the swf to take up 100%, but 100% of what? The swf is in the body tag. The body tag is in the html tag, which is in the browser window. Most browsers will scale the html size to fill the browser window and scale the body to fill the html size.
Not so with Mozilla/Firefox. It doesn’t assume that html fills 100% of the browswer, or that body fills 100% of the html. So you have to tell it that.
The following little snippet in a styles tag in the html head handles all of this:
body,html {
margin:0px;
padding:0px;
height:100%;
}
I actually put this right into the default.html file in the templates Flash uses to create its html. Of course you have to take it out if you don’t need it, but I found it easier to delete than have to remember when I need it. That’s just me. If I were really organized, I’d create a whole new template for this purpose.
just today i found this bug and i was wondering how!
great bit101
This is due to the DOCTYPE of your html file..
If you use an older doctype it will work fine
eg:
[ !DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” ]
lt/gt chars removed..
That’s good to know too, Ryan.
That’s good to know too, Ryan.
That is NOT good to know ryan, as that DOCTYPE is faulty. DOCTYPE’s are used to convey the version of html you are using. Like flash, every version has it own abilities and properties.
What would happen to a flash player if you feed it the wrong version jumber of your swf? Like, say, Math.PI versions back?
Thank goodness that browsers ere much more forgiving.
PS why use height:100%?
I know it’s not proper, i was just stating that the browser handles the page and various attributes and tags differently with the various doctypes..
This particular issue is due to the way the page is handled based on the doctype..
** No harm was intended! **
😉
Have you tried this code on Mac/IE?
In my experience it will add a load of blank space below the swf. The blank space is equal to the *width* of the browser window – go figure!
hi everyone, i’m from Brazil and i’ve learned with you guys how to make gravity…..thank you!!!
You have the best website ever,,,,please…could you check out my gravity? U can see it at :
http://www.templatesdalua.blogger.com.br … lol
bye bye
I find it nice to remove the side scrollbar when I use a full screen flash… just add this to the body style:
overflow-y: hidden;
Yep scrollbars can also be removed adding scroll=”no” in the body tag
In fact, using that DOCTYPE isn’t that bad. The point of DOCTYPE is letting the browser know which version of HTML you’re using, right? And, you are infact using an older version of HTML if you AREN’T using bit’s suggested code, and assuming the body is 100%. As long as you don’t expect it to use abilities of future versions, there’s no reason not to do that. Just like you could publish your movie to Flash 5, in case you were using only Flash 5 features, and wanted to be availble to Flash 5 users.
Seems perfectly right to me.
much appreciated, thanks alot! was just working on a project and couldn’t figure this one out.