Solved

Layer ordering CSS and Flash

Posted on 2007-11-18
2
1,998 Views
Last Modified: 2013-11-19
I am currently developing a website that combines HTML and Flash elements.  I have a menu that is generated with CSS and below it I have a flash slideshow showing some applications of the product the site is promoting.  The problem is that there are cascading items that appear in the menu that are appearing underneath the embeded SWF below it.  I have them both wrapped in DIVs and have a z-index property attached to it and a position of relative but the z-index is having any effect as the cascading menu items still appear underneath the DIV.

I am not sure what else to try and would appreciate any expertise you may have.
I am using a table as a container.
 
HTML for menu:
 
		<td height="43" valign="middle" class="menu">
 
<div id="menubg">
<!--|**START IMENUS**|imenus0,dw_template-->
<!-- ****** Infinite Menus Core CSS [Do Not Modify!] ****** -->
<style type="text/css">.imcm ul,.imcm li,.imcm div,.imcm span,.imcm a{text-align:left;vertical-align:top;padding:0px;margin:0;list-style:none outside none;border-style:none;background-image:none;clear:none;float:none;display:block;position:static;overflow:visible;line-height:normal;}.imcm li a img{display:inline;border-width:0px;}.imcm span{display:inline;}.imcm .imclear,.imclear{clear:both;height:0px;visibility:hidden;line-height:0px;font-size:1px;}.imcm .imsc{position:relative;}.imcm .imsubc{position:absolute;visibility:hidden;}.imcm li{list-style:none;font-size:1px;float:left;}.imcm ul ul li{width:100%;float:none !important;}.imcm a{display:block;position:relative;}.imcm ul .imsc,.imcm ul .imsubc {z-index:10;}.imcm ul ul .imsc,.imcm ul ul .imsubc{z-index:20;}.imcm ul ul ul .imsc,.imcm ul ul ul .imsubc{z-index:30;}.imde ul li:hover .imsubc{visibility:visible;}.imde ul ul li:hover  .imsubc{visibility:visible;}.imde ul ul ul li:hover  .imsubc{visibility:visible;}.imde li:hover ul  .imsubc{visibility:hidden;}.imde li:hover ul ul .imsubc{visibility:hidden;}.imde li:hover ul ul ul  .imsubc{visibility:hidden;}.imcm .imea{display:block;position:relative;left:0px;font-size:1px;line-height:1px;height:0px;width:1px;float:right;}.imcm .imea span{display:block;position:relative;font-size:1px;line-height:0px;}.dvs,.dvm{border-width:0px}/*\*//*/.imcm .imea{visibility:hidden;}/**/</style><!--[if IE]><style type="text/css">.imcm .imea span{position:absolute;}.imcm .imclear,.imclear{display:none;}.imcm{zoom:1;} .imcm li{curosr:hand;} .imcm ul{zoom:1}.imcm a{zoom:1;}</style><![endif]--><!--[if gte IE 7]><style type="text/css">.imcm .imsubc{background-image:url(ie_css_fix);}</style><![endif]-->
 
 
<!-- ***** Infinite Menus CSS Style Settings ***** -->
<link rel="stylesheet" href="../css/imenus0.css" type="text/css">
 
 
<!--  ****** Infinite Menus Structure & Links ***** -->
<div class="imrcmain0 imgl" style="width:495px;z-index:999999;position:relative;"><div class="imcm imde" id="imouter0"><ul id="imenus0">
<li class="imatm"  style="width:59px;"><a href="#" style="height:30px;">Home</a></li>
<li class="imatm"  style="width:230px;"><a class="" href="#" style="height:30px;"><span class="imea imeam"><span></span></span>Product Information</a>
 
	<div class="imsc"><div class="imsubc" style="width:208px;top:-10px;left:-1px;"><ul style="">
	<li class="dvs"><a class="" href="#"><span class="imea imeas"><span></span></span>Technical Information</a>
 
		<div class="imsc"><div class="imsubc" style="width:129px;top:-28px;left:199px;"><ul style="">
		<li><a href="#">Dosage Rate</a></li>
		<li><a href="#">Cylinder Tests</a></li>
		</ul></div></div></li>
 
 
	<li class="dvs"><a href="#">Pricing Information</a></li>
	<li><a href="#">Applications</a></li>
	</ul></div></div></li>
 
 
<li class="imatm"  style="width:117px;"><a href="#" style="height:30px;"><span class="imea imeam"><span></span></span>Features</a>
 
	<div class="imsc"><div class="imsubc" style="width:101px;top:-11px;left:-2px;"><ul style="">
	<li class="dvs"><a href="#">Fiber Facts</a></li>
	<li class="dvs"><a href="#">Comparison</a></li>
	<li><a href="#">Order Now</a></li>
	</ul></div></div></li>
 
 
<li class="imatm"  style="width:89px;"><a href="#" style="height:30px;">Savings</a></li>
</ul><div class="imclear">&nbsp;</div></div></div>
 
 
<!--[imcode]*** Infinite Menus Settings / Code - This script reference must appear last. ***
 
      *Note: This script is required for scripted add on support and IE 6 sub menu functionality.
      *Note: This menu will fully function in all CSS2 browsers with the script removed.-->
 
<script language="JavaScript" src="../scripts/ocscript.js" type="text/javascript"></script>
<!--|**END IMENUS**|-->
</td>
 
HTML for Flash Object:
 
<tr>
		<td height="160" valign="top" class="appmodule"><!-- InstanceBeginEditable name="App Module" --><div id="app">
		  <script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','945','height','160','align','top','title','Applications','src','flash/appslidehow','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','flash/appslidehow' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="945" height="160" align="top" title="Applications">
        <param name="movie" value="flash/appslidehow.swf">
            <param name="quality" value="high">
            <embed src="flash/appslidehow.swf" width="945" height="160" align="top" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash"></embed>
	    </object></noscript></div>
		<!-- InstanceEndEditable --></td>
  </tr>
 
CSS STYLES (MENU):
 
#menubg {
	margin-left: 5px;
	background-image:url(../images/menubg_03.jpg);
	padding-top: 5px;
	width: 627px;
	height: 32px;
	background-repeat: no-repeat;
	padding-left: 10px;
	margin-top: 5px;
	z-index: 5;
	position:relative;
 
}
 
CSS STYLE FOR FLASH:
 
#app {	
z-index: 1;
position:relative;
}

Open in new window

0
Comment
Question by:bordstudios
[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 3

Expert Comment

by:john_steed
ID: 20323989
Hey

Try publishing your swf as "transparent", this should make it work

Good luck!
0
 
LVL 3

Accepted Solution

by:
anandhariharan earned 500 total points
ID: 20491116
here you go. Put the following code inside the <object> tag of the flash file
<param name="wmode" value="transparent">

Open in new window

0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
How to combine and minify CSS and JS files 5 61
CSS in HTML 5 66
MediaWiki - Move a site 4 55
CSS/jQuery scaling images and detecting height and width 8 10
What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
The goal of the tutorial is to teach the user how to live broadcast using Flash Media Live Encoder and connecting it to YouTube to broadcast. Log into your Youtube account, choose live stream settings, start live stream from Flash Media Live Enc…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

734 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