The height and width properties on my Flex 4 app are not working?

In the opening application tag of my Flex 4 app, I set the width and height properties as follows:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark"
           xmlns:mx="library://ns.adobe.com/flex/mx"
           creationComplete="init()"
           backgroundColor.mainState="0x303030"
           xmlns:components="components.*"
           width="798"
           height="240">

What I go into Design mode in Flash Builder 4, the app is the correct size. But when I embed the .swf file into a HTML page, the application's background color covers the whole screen, and when the Flash Player Settings message box pops up it is outs开发者_如何转开发ide of the area I defined in the code above. What am I doing wrong? Thanks for reading.

Set the Flex Application width and height to 100%.

No matter what, the html template's width and height are always 100%, you have to set the flex application width and height to 100%. Flex Application itself cannot render on the browser. It needs some kind of wrapper to render it on the browser. Hence Flex Application gets wrapped inside an HTML template and the Browser eventually renders the Flex Application.

Flex Application --> HTML Template --> Browser

Check the index.template.html in the html-template folder. That's the file that generates your index.html when you build; perhaps you could address your problems in there.