Adding html header without swf scrolling

428
0
07-25-2013 10:16 AM
KenBuja
MVP Esteemed Contributor
I was asked to add an html header to my Flex application. However, I'm running into an issue of trying to set the height of the body where the swf file resides.

The standard html template contains this css information

        <style type="text/css" media="screen"> 
            html, body  { height:100%; }
            body { margin:0; padding:0; overflow:auto; text-align:center; 
                   background-color: ${bgcolor}; }   
            object:focus { outline:none; }
            #flashContent { display:none; }
        </style>


If I add in another div with the header content above "flashContent", then I'll get a scroll bar on the side and the swf isn't fitted into the remaining space in the browser.

Our IT department suggested making this change to the css file, changing the height and overflow properties

        <style type="text/css" media="screen"> 
            html, body  { height:97%; width:100% }
            body { margin:0; padding:0; overflow:none; text-align:center; 
                   background-color: #ffffff; }   
            object:focus { outline:none; }
            #flashContent { display:none; }
        </style>


and adding additional css styles using an external css file. However, as seen here for one of their sites, it doesn't quite work. If the browser height is reduced, the scale bar and the lat/long/scale information falls off the bottom of the screen.

How can I do this properly?
Tags (2)
0 Kudos
0 Replies