Expiring Today—Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

z-index issue with flash using SWFObject in IE

Posted on 2009-04-13
2
Medium Priority
?
3,231 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 11

Expert Comment

by:level9wizard
ID: 24131084
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
ID: 24132347
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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The goal of the tutorial is to teach the user how to set there setting in Adobe Flash Media Live Encoder and YouTube for optimal video and audio quality.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

718 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