Solved

z-index issue with flash using SWFObject in IE

Posted on 2009-04-13
2
3,208 Views
Last Modified: 2012-05-06
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
Comment
Question by:RowdyBurns
2 Comments
 
LVL 11

Expert Comment

by:level9wizard
Comment Utility
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
 

Accepted Solution

by:
RowdyBurns earned 0 total points
Comment Utility
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

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
This article discusses four methods for overlaying images in a container on a web page
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
This Micro Tutorial will teach to how to utilize bit rate in Adobe Flash Media Live Encoder.

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now