Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 3241
  • Last Modified:

z-index issue with flash using SWFObject in IE

Hi Experts,

I am having difficulty getting the flash elements of my page to go being a static header that i have at the top of my page. I have resolved the issue using z-index in FF and Safari on my Mac but in IE 6, 7 and FF on the PC the flash appears above the header.

I need to use SWFObject to embed in order to avoid the activeX control in IE

Here is my test page URL:

http://www.randomlychallenged.com/HomeTEST.php

To see the flash you will need to login with:
Username: test
Password: aaa

I have also added my code below.

Thanks for any advise.
HEADER CODE:
 
<div style="position:fixed; top:0px; left:0px; z-index:10; width:100%; background-image:url(Images/Home/MainBG.jpg); background-repeat:repeat-x;"><div style="width:100%; position:absolute; height:70px; background-image:url(Images/Home/MainBG.jpg); background-repeat:repeat-x;"><div style="width:120px; height:110px; position:absolute; top:0px; left:0px; z-index:50;"><a href="./Home.php" title="Home"><img src="./Images/Home/HomeLogoTEST.jpg" alt="RandomlyChallenged" width="120" height="110" border="0"  longdesc="http://www.randomlychallenged.com/Home.php" /></a></div>
</div>
<?php
if (isset($_SESSION['herecomethepain'])) {
?>	
<div class="staticHeader"><div style="position:absolute; top:0; left:200px;"><div >
 
      
	  <object id="swfplaceholder" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="700" height="70">
          <param name="movie"  value="/HeaderTEST.swf"  />
        <!--[if !IE]>-->
        <object type="application/x-shockwave-flash" data="/HeaderTEST.swf" width="700" height="70" style="z-index:10;">
		
        <!--<![endif]-->
         <div><a href="http://www.adobe.com/downloads"><img src="./Images/Home/SignUp.jpg" alt="Join Randomly Challenged - The home of adventure online" width="700" height="118" border="0" /></a></div>
        <!--[if !IE]>-->
        </object>
        <!--<![endif]-->
      </object>
    </div>
  
</div>
 
<div class="chromestyle" id="chromemenu">
 
<ul>
<li class="bodyTxtSmallWhite" style="margin:0 230px 0 0;">Hi<?php if ($newcontentglitch==1) { ?><?php echo $_SESSION['herecomethepain']; ?><?php } else { ?><a href="./MyProfile.php"><?php echo $_SESSION['herecomethepain']; ?></a><?php } ?>
Total&nbsp;Experience&nbsp;
<?php echo $exp; ?></li>
<li><a href="http://www.randomlychallenged.com">Home</a></li>
<li><a href="./NewContent.php">New Content</a></li>
<li><a href="./MyProfile.php" rel="dropmenu1">Profile</a></li>
<li><a href="./MyMail.php"  title="You have <?php echo $_SESSION['newmailcount']; ?> new messages">Mail - <?php echo $_SESSION['newmailcount']; ?></a></li>	
<li><a href="#" rel="dropmenu2">Help</a></li>
<li><a href="./Logout_Script.php">Logout</a></li>
 
</ul>
 
</div>
 
<!--1st drop down menu -->                                                   
<div id="dropmenu1" class="dropmenudiv">
<a href="./MyChallenges.php">Challenges</a>
<a href="./MyProfile.php#Friends">Friends</a>
<a href="./MyTrophies.php" title="Total trophies in your cabinet">Trophies - <?php echo $_SESSION['trophies']; ?></a>
 
</div>
 
 
 
<!--3rd drop down menu -->                                                   
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
<a href="./FAQ.php.php">FAQ's</a>
<a href="./SiteMap.php">Site Map</a>
<a href="./ContactUs.php">Contact us</a>
</div>
 
</div>
 
</div>
<?php
}
else {
?><div class="bodyTxtBlue" style="background-image:url(Images/Home/LogoutHeader.jpg); background-repeat:no-repeat; height:70px; width:700px; padding:20px 0 0 250px; position:absolute; top:0; left:200px;"><a href="./Registration.php">New to Randomly Challenge?<br />
Take a tour</a></div>
 
<div class="chromestyle" id="chromemenu">
 
<ul>
<li><form action="./Login_Script.php"   method="post"  id="user-login-form"></li>
<li><input name="Username"  type="text"  id="Username" value="Username" size="12" onfocus="if(this.value=='Username') this.value=''" /></li>
    
<li><input name="Password"   type="password"  id="Password" onfocus="if(this.value=='aaaaaaaa') this.value=''"   value="aaaaaaaa"  size="12" />
</li>
          
<li><input name="Submit" type="image" class="bodyTxtSmallWhite" style="margin:0 200px 0 0;"   onclick="./Login_Script.php" value="Login"  /></li>
<li></form></li>
<li><a href="http://www.randomlychallenged.com">Home</a></li>
<li><a href="./NewContent.php">New Content</a></li>
<li><a href="#" rel="dropmenu1">Help</a></li>
 
</ul>
</div>
 
 
 
 
<!--1st drop down menu -->                                                   
<div id="dropmenu1" class="dropmenudiv" style="width: 150px;">
<a href="./FAQ.php.php">FAQ's</a>
<a href="./SiteMap.php">Site Map</a>
<a href="./ContactUs.php">Contact us</a>
<a href='#'  onclick="GB_showCenter('Reset Your Password', '../../../PasswordReset_modal.php')">Lost your password?</a>
</div>
 
 
 
 
<?php 
}
?></div>
</div>
<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>
 
 
 
 
///////////////////////////HOME PAGE CODE///////////////////////////////////////////////
 
<?php
include './infolink.php';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html><head><title>Home - Randomly Challenged &#8482; - The home of adventure online!</title>
<meta name="Keywords" content="adventure game challenge home index default vacation active site exciting entertainment watch funny cool experience ideas bored fun play friends network social community video articles stories new movies watch read weekend spare time free mammoth random games holiday do prizes" />
<meta name="description" content="Welcome to the most exciting adventure community online where you never know what the next real life challenge might be. Reap prize rewards for your efforts when you share your adventure with the community." />
 
 
<link href="css/GlobalTEST.css" rel="stylesheet" type="text/css" />
<link href="css/chromestyle.css" rel="stylesheet" type="text/css" />
 
<style type="text/css">
<!--
 
-->
</style>
 
<script type="text/javascript" src="http://www.randomlychallenged.com/js/swfobject.js"></script>
<!--this is the JS for the SWFOject that embeddes the flash header and anyother flash content -->
 
 
	
<script>
 
function MM_callJS(jsStr) { //v2.0
  return eval(jsStr)
}
 
 
function ModalExec1(modalVal) {
///This handles the output of the NewUser modal
if (modalVal==1) {
window.location="./MyProfile.php";
}
if (modalVal==2) {
window.location="./FAQ.php";
}
if (modalVal==3) {
window.location="./MyChallenges.php";
}
if (modalVal==4) {
window.location="./MyMail.php";
}
 
}
 
 
</script>
 
<script type="text/javascript" src="js/Nav/chrome.js">
 
/***********************************************
* Chrome CSS Drop Down Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
 
</script>
 
 
	
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
<!--
body {
	margin-top: 0px;
	background-image: url(./Images/Home/MainBG.jpg);
	background-repeat: repeat-x;
}
a:link {
	color: #36527A;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
a:active {
	text-decoration: none;
}
-->
</style>
 
 
<!--////////////////MODAL WINDOW SCRIPT CALLS	////////////-->
<script type="text/javascript">
    var GB_ROOT_DIR = "http://www.randomlychallenged.com/js/GreyBox_v5_53/greybox/";
</script>
 
<script type="text/javascript" src="./js/GreyBox_v5_53/greybox/AJS.js"></script>
<script type="text/javascript" src="./js/GreyBox_v5_53/greybox/AJS_fx.js"></script>
<script type="text/javascript" src="./js/GreyBox_v5_53/greybox/gb_scripts.js"></script>
<link href="./js/GreyBox_v5_53/greybox/gb_styles.css" rel="stylesheet" type="text/css" />
 
</head>
 
<body>
 
<!--//////////////// NEW USER MODAL BEGINS	////////////-->	
<script type="text/javascript">
 
function init() {
 
  var newusercheck = "<?php if ($_SESSION['auto_help']==1) { echo "1"; } else { echo "0"; } ?>";
  if (newusercheck==1) {
  GB_showCenter('Welcome to Randomly Challenged!', '../../../NewUser_modal_home.php',400,900)
  }
}
 
 
window.onload = init;
 
</script>
 
 
<!--//////HEADER AND LOGIN/SIGN UP START//////-->
<?php include './MainHeaderTEST.php'; ?>
<!--//////HEADER AND LOGIN/SIGN END//////-->
 
<div id="centercontent">
   <div align="right"  style="border-top:#6BB401 medium solid; border-bottom:#CCCCCC thin solid; height:26px;"></div>
 
<!--//////MAIN LOGGED-IN CONTENT BEGINS//////--><?php
if (isset($_SESSION['herecomethepain'])) {
?>
<!--BANNER BEGINS-->
<div class="bodyTxt" style="z-index:1;"> <object id="swfplaceholder" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="700" height="100" style="z-index:1;">
          <param name="movie" wmode="transparent" value="/Flash/BugBanner.swf"  />
        <!--[if !IE]>-->
        <object type="application/x-shockwave-flash" data="/Flash/BugBanner.swf" width="700" height="100" style="z-index:1;">
        <!--<![endif]-->
         <div><a href="http://www.adobe.com/downloads">Click to update Flash Player</a></div>
        <!--[if !IE]>-->
        </object>
        <!--<![endif]-->
      </object></div>
<div class="bodyTxt" id="mainContentContainer">
<!--BANNER ENDS-->
<!--ARTICLE BEGINS-->
<div><?php 
//pagination script	
include './pagination.class.php';
$pagination = new pagination;
 
 
///gets articles and creates an array
 
mysql_select_db($database_RC, $RC);
$query_Recordset1 = "SELECT articles.title FROM articles";
$Recordset1 = mysql_query($query_Recordset1, $RC) or die(mysql_error());
$row_Recordset1 = mysql_fetch_assoc($Recordset1);
$totalRows_Recordset1 = mysql_num_rows($Recordset1);
 
$articles=array();
$zz=0;
if ($totalRows_Recordset1!=0) {
while ($zz<$totalRows_Recordset1) {
$articles[]= mysql_result($Recordset1, $zz, 'title');
$zz++;
}
}
//order array in reverse so newest comes first
rsort($articles);
 
 
//pagination script
$ArrayPages = $pagination->generate($articles, 1);
 
foreach ($ArrayPages as $articles) {
include './Articles/'.$articles;
}
echo $pageNumbers = '<div align="center">'.$pagination->links().'</div>';
 ?></div>
<!--ARTICLE ENDS --> 
<div style="clear:both;">
<hr color="#CCCCCC" thin solid/>
<span class="bodyLGBlueTxt">So, what have people been up to?</span><p>
<?php include './HomePhotoGrid_INC.php'; ?> 
<!--//MAIN CONTENT ENDS///--></div>
</div><?php
}
else {
?><!--CONTENT FOR HOME PAGE WHEN USER IS LOGGED OUT--><?php include './HomeJoin_INC.php'; ?><div class="bodyTxt" id="mainContentContainer">
 
 
  <div style="clear:both;">
<hr color="#CCCCCC" thin solid/>
<span class="bodyLGBlueTxt">So, what have people been up to?</span><p>
<?php include './HomePhotoGrid_INC.php'; ?><!--//MAIN CONTENT ENDS///--><?php 
}
?> <!--LOGGED OUT CONTENT ENDS--><div style="height:100px;"></div></div></div></div>
 
<div align="center" id="footer"><?php include './MainFooterTEST.php'; ?></div>	
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-8330450-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>
<?php
if (isset($Recordset1)) { mysql_free_result($Recordset1); }
?>

Open in new window

0
RowdyBurns
Asked:
RowdyBurns
1 Solution
 
level9wizardCommented:
I think you aren't using wmode properly. You need something like:
so.addParam("wmode", "transparent");

Take a look at this article:
http://www.askapache.com/css/getting-flash-to-show-up-in-front-of-content.html
0
 
RowdyBurnsAuthor Commented:
This did the trick but thanks for the lead, it put me on the right track.

<object id="swfplaceholder" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="700" height="100" >
          <param name="wmode" value="opaque">

          <param name="movie" value="PATH TO SWF"   />
             
        <!--[if !IE]>-->
        <object type="application/x-shockwave-flash" data="PATH TO SWF" width="700" height="100" >
            <param name="wmode" value="opaque">
        <!--<![endif]-->
         <div><a href="http://www.adobe.com/downloads">Click to update Flash Player</a></div>
        <!--[if !IE]>-->
        </object>
        <!--<![endif]-->
      </object>
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now