Like the title says, could someone possibly explain to me what im doing wrong with embedding this swf? **My code works fine in chrome**...But doesn't appear in FireFox, and it look compacted in IE, like its only set to a 5% height or something.
All I want to do is have the swf scale to 80% width(then i use the margin:0 auto; to center it), then 75% height. Theres a header, small ad at the top, and a footer at the bottom. All while being compatable with Chrome, FF, IE.
Incase possibly this matters..in my Flex Project I set the swf height and width to 100%. I figured since it's being embeded inside the `.mainContainer` div, the swf would then assume its parent(mainContainer)'s width and height wich is set to width:80% and height:75%. **And it does it chrome just fine** but like i said above the swf doesn't appear in FF. I thought maybe i should note this incase it's necessary information to solve this bug.
I didn't think this would be too hard but I can't seem to get the swf to load in FF. I'm seeing the swf making connects to some netConnections and stuff like its there, i just cant see anything.
-What am i doing wrong?
-Is there a better way I should be implementing the swf?
-How can i figure out whats wrong on my own in the future?
(im so used to working in Flash builder on flash projects, the debugging is so simple, informative, and easy to use. With only having access to "inspector" in chrome which never spits out any useful information I feel like im coding in the dark compared to using eclipse)
**EDIT:**
1 more thing I should mention. Pretty much the entire "embed" code provided here was auto generated by Flash Builder. I created .mainContainer around the "embed" code and all the extra divs around it... my header, footer,ect. Without any of my extra content, the swf appears just fine like you would expect it in firefox. SO my point in saying this is i do not think its **literally** the embed code. Because that embed code works in FF. It's just how im implemented my header, and div around this flash content that seems to break the code in FF for some reason.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>TestApp</title>
<meta name="google" value="notranslate" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="assets/css.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="history/history.css" />
<?php
if(!isset ($_GET["chan"]))
{$chan="random";}
else
{$chan = preg_replace('/[^a-z]/', "", strtolower($_GET["chan"]));}
?>
<script type="text/javascript" src="history/history.js"></script>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
var swfVersionStr = "10.2.0";
var xiSwfUrlStr = "playerProductInstall.swf";
var flashvars = {chan: "<?php echo $chan ?>"};
var params = {};
params.quality = "high";
params.bgcolor = "#ffffff";
params.allowscriptaccess = "sameDomain";
params.allowfullscreen = "true";
params.wmode="transparent";
var attributes = {};
attributes.id = "TestApp";
attributes.name = "TestApp";
attributes.align = "middle";
swfobject.embedSWF(
"TestApp.swf", "flashContent",
"100%", "100%",
swfVersionStr, xiSwfUrlStr,
flashvars, params, attributes);
swfobject.createCSS("#flashContent", "display:block;text-align:left;");
</script>
</head>
<body>
<div class="wrapper">
<div class="TopBar">
<div class="homeBarBtnsHolder">
</div>
</div>
<div class="topad">
<!-- google ad-->
</div>
<div class="mainContainer">
<!--embed -->
<div id="flashContent">
<p>
To view this page ensure that Adobe Flash Player version
10.2.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>
</div><!--flashContent -->
<noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" id="TestApp">
<param name="movie" value="TestApp.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="transparent" />
<param name="FlashVars" value="chan=<?php echo $chan ?>" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="TestApp.swf" width="100%" height="100%">
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="transparent" />
<param name="FlashVars" value="chan=<?php echo $chan ?>" />
<!--<![endif]-->
<!--[if gte IE 6]>-->
<p>
Either scripts and active content are not permitted to run or Adobe Flash Player version
10.2.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>
<!--embed -->
</div><!--mainContainer end -->
<div class="push"></div><!--this is the push to make my footer stick to the bottom-->
</div> <!--wrapper -->
<div class="footer">
<p>Top part of footer infoHere</p>
<p>Lower part of footer infoHere</p>
</div>
</body>
</html>
css.css
html, body {
height:100%;
width:100%;
}
body {
margin:0;
padding:0;
overflow:auto;
text-align:center;
background: url('../../assets/images/homeBG.png') repeat-x;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
}
object:focus {
outline:none;
}
#flashContent {
display:none;
}
.mainContainer {
min-width:340px;
min-height:500px;
height: 75%;
width:80%;
margin:0 auto;
padding:0;
}
.wrapper {
min-height: 100%;
height: 100%;
width:100%;
height: auto !important;
margin: 0 auto -200px;
}
.TopBar {
background: url('../../assets/images/TopBarBG.png') repeat-x;
text-align: left;
height:50px;
width:100%;
box-shadow: 0px 7px 16px rgba(0, 0, 0, 0.65);
-moz-box-shadow: 0px 7px 16px rgba(0, 0, 0, 0.65);
-webkit-box-shadow: 0px 7px 16px rgba(0, 0, 0, 0.65);
margin-bottom:15px;
}
.footer, .push {
height: 200px;
text-align:center;
clear: both;
width:100%;
}
