I'm trying to use CSS to position my Flex app but it's not working

Posted by ben on Stack Overflow See other posts from Stack Overflow or by ben
Published on 2010-05-24T07:29:27Z Indexed on 2010/05/24 8:11 UTC
Read the original article Hit count: 447

Filed under:
|
|
|
|

I'm trying to position my Flex app so that its in the bottom 40% vertically, and the left 70% horizontally. This is how I define the flash section in CSS:

#flashContent { display:none;position:absolute; top:60%;width:70%;height:40%;}

Here is the HTML:

<div id="flashContent">
            <p>
                To view this page ensure that Adobe Flash Player version 
                10.0.0 or greater is installed. 
            </p>
            <script type="text/javascript"> 
                var pageHost = ((document.location.protocol == "https:") ? "https://" : "http://"); 
                document.write("<a href='http://www.adobe.com/go/getflashplayer'><img src='" 
                                + pageHost + "www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a>" ); 
            </script> 


    <noscript>
        <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="434" height="100%" id=app name>
            <param name="movie" value=link_to_the_file />
            <param name="quality" value="high" />
            <param name="bgcolor" value="#ffffff" />
            <param name="allowScriptAccess" value="sameDomain" />
            <param name="allowFullScreen" value="true" />
            <!--[if !IE]>-->
            <object type="application/x-shockwave-flash" data=link_to_the_file width="434" height="100%">
                <param name="quality" value="high" />
                <param name="bgcolor" value="#ffffff" />
                <param name="allowScriptAccess" value="sameDomain" />
                <param name="allowFullScreen" value="true" />
            <!--<![endif]-->
            <!--[if gte IE 6]>-->
                <p> 
                    Either scripts and active content are not permitted to run or Adobe Flash Player version
                    10.0.0 or greater is not installed.
                </p>
            <!--<![endif]-->
                <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>
            <!--[if !IE]>-->
            </object>
            <!--<![endif]-->
        </object>
    </noscript> 
</div>  

But it's still just appearing in the top-left corner. What am I doing wrong?

Thanks for reading.

© Stack Overflow or respective owner

Related posts about html

Related posts about css