I'm working on a project where I need to make a Flex application that fills the entire browser window (note that I mean that the toolbars should be visible and all that even if I say fullscreen).
To develop the SWF I'm using FlashDevelop (for the first time) and I'm stuck. When I build the project it displays no error and a file website.swf is generated. When I browse to this file with Firefox, it displays what I want and in fullscreen. However when I go to the generated index.html I get a white horizontal bar at the top of my screen (again the browser window).
I've looked around a bit on the internet and found several people suggesting that the CSS should include stuff like:
<style type="text/css">
html, body { margin:0; height:100%; overflow:hidden; }
body { margin:0; height:100%; width:100%;}
</style>
But that didn't cut it for me, I still have the white bar. I've tried margin, top, width, height and border so far, nothing seems to work.
Other tutorials show how to make an SWF fullscreen as in the Firefox F11 equivalent, which is not what I want (and it still displays the annoying white bar when I press F11 :().
EDIT: Additionally when I place an extra line above the "altContent" div that says "Blub", this line will be displayed in the white bar.
For completeness, the HTML, since I expect this to be the problem:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Website</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content="en" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script src="js/swfobject.js" type="text/javascript"></script>
<script type="text/javascript">
var flashvars = {
};
var params = {
menu: "false",
scale: "noScale",
allowFullscreen: "true",
allowScriptAccess: "always",
bgcolor: "#FFFFFF"
};
var attributes = {
id:"Website"
};
swfobject.embedSWF("Website.swf", "altContent", "100%", "100%", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
</script>
<style type="text/css">
html, body { margin:0; height:100%; overflow:hidden; }
body { margin:0; height:100%; width:100%;}
</style>
</head>
<body>
<div id="altContent">
<h1>Website</h1>
<p>Alternative content</p>
<p><a href="http://www.adobe.com/go/getflashplayer"><img
src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"
alt="Get Adobe Flash player" /></a></p>
</div>
</body>
</html>