Popup Menu Hiding under flash swf features bar

Question

m-hrt 0 Light Poster

16 Years Ago

i have made a popup menu in fireworks cs3 its working fine in all browsers the problem is that its hiding under the flash features bar as shown in the image where in firefox its working fine what should i do?

Internet explorer

[IMG][/IMG]

Firefox

[IMG][/IMG]

Coding:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>I.T Center Shah Abdul Latif University Khairpur Mir's</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<!--[if IE 5]>
<style type="text/css"> 
/* place css box model fixes for IE 5* in this conditional comment */
.twoColFixRtHdr #sidebar1 { width: 220px; }
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css"> 
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixRtHdr #sidebar1 { padding-top: 30px; }
.twoColFixRtHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
<style type="text/css" media="screen">
	@import url("navigation_menu.css");
.style1 {color: #d7d7ae}
.style2 {color: #de7f0b}
a:link {
	color: #d7d7ae;
}
a:visited {
	color: #d7d7ae;
}
a:active {
	color: #d7d7ae;
}
a:hover {
	color: #b0b07a;
}
</style>
<script language="JavaScript1.2" type="text/javascript" src="mm_css_menu.js"></script>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>

<body class="twoColFixRtHdr" onload="MM_preloadImages('images/navigation_menu_r1_c2_f2.gif','images/navigation_menu_r1_c4_f2.gif','images/navigation_menu_r1_c6_f2.gif','images/navigation_menu_r1_c8_f2.gif','images/navigation_menu_r1_c10_f2.gif','images/navigation_menu_r1_c12_f2.gif','images/navigation_menu_r1_c14_f2.gif')" tracingsrc="images/_tracing.jpg" tracingopacity="100">

<div id="container">
  <div id="header"><img src="images/header.jpg" alt="" width="1004" height="199" />
  <!-- end #header --></div>
  <div class="navigation">
    <div id="FWTableContainer176348173">
      <table border="0" cellpadding="0" cellspacing="0" width="1004">
        <!-- fwtable fwsrc="nav_psd.png" fwpage="Page 1" fwbase="navigation_menu.gif" fwstyle="Dreamweaver" fwdocid = "176348173" fwnested="0" -->
        <tr>
          <td><img src="images/spacer.gif" alt="" name="undefined_2" width="58" height="1" border="0" id="undefined_2" /></td>
          <td><img src="images/spacer.gif" alt="" name="undefined_2" width="55" height="1" border="0" id="undefined_2" /></td>
          <td><img src="images/spacer.gif" alt="" name="undefined_2" width="2" height="1" border="0" id="undefined_2" /></td>
          <td><img src="images/spacer.gif" alt="" name="undefined_2" width="69" height="1" border="0" id="undefined_2" /></td>
          <td><img src="images/spacer.gif" alt="" name="undefined_2" width="2" height="1" border="0" id="undefined_2" /></td>
          <td><img src="images/spacer.gif" alt="" name="undefined_2" width="67" height="1" border="0" id="undefined_2" /></td>
          <td><img src="images/spacer.gif" alt="" name="undefined_2" width="2" height="1" border="0" id="undefined_2" /></td>
          <td><img src="images/spacer.gif" alt="" name="undefined_2" width="85" height="1" border="0" id="undefined_2" /></td>
          <td><img src="images/spacer.gif" alt="" name="undefined_2" width="2" height="1" border="0" id="undefined_2" /></td>
          <td><img src="images/spacer.gif" alt="" name="undefined_2" width="72" height="1" border="0" id="undefined_2" /></td>
          <td><img src="images/spacer.gif" alt="" name="undefined_2" width="2" height="1" border="0" id="undefined_2" /></td>
          <td><img src="images/spacer.gif" alt="" name="undefined_2" width="49" height="1" border="0" id="undefined_2" /></td>
          <td><img src="images/spacer.gif" alt="" name="undefined_2" width="2" height="1" border="0" id="undefined_2" /></td>
          <td><img src="images/spacer.gif" alt="" name="undefined_2" width="74" height="1" border="0" id="undefined_2" /></td>
          <td><img src="images/spacer.gif" alt="" name="undefined_2" width="463" height="1" border="0" id="undefined_2" /></td>
          <td><img src="images/spacer.gif" alt="" name="undefined_2" width="1" height="1" border="0" id="undefined_2" /></td>
        </tr>
        <tr>
          <td><img name="navigation_menu_r1_c1" src="images/navigation_menu_r1_c1.gif" width="58" height="24" border="0" id="navigation_menu_r1_c1" alt="" /></td>
          <td><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('navigation_menu_r1_c2','','images/navigation_menu_r1_c2_f2.gif',1);"><img name="navigation_menu_r1_c2" src="images/navigation_menu_r1_c2.gif" width="55" height="24" border="0" id="navigation_menu_r1_c2" alt="" /></a></td>
          <td><img name="navigation_menu_r1_c3" src="images/navigation_menu_r1_c3.gif" width="2" height="24" border="0" id="navigation_menu_r1_c3" alt="" /></td>
          <td><a href="aboutus.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('navigation_menu_r1_c4','','images/navigation_menu_r1_c4_f2.gif',1);"><img name="navigation_menu_r1_c4" src="images/navigation_menu_r1_c4.gif" width="69" height="24" border="0" id="navigation_menu_r1_c4" alt="" /></a></td>
          <td><img name="navigation_menu_r1_c5" src="images/navigation_menu_r1_c5.gif" width="2" height="24" border="0" id="navigation_menu_r1_c5" alt="" /></td>
          <td><a href="#" onmouseout="MM_swapImgRestore();MM_menuStartTimeout(100)" onmouseover="MM_menuShowMenu('MMMenuContainer0503152143_0', 'MMMenu0503152143_0',0,25,'navigation_menu_r1_c6');MM_swapImage('navigation_menu_r1_c6','','images/navigation_menu_r1_c6_f2.gif',1);"><img name="navigation_menu_r1_c6" src="images/navigation_menu_r1_c6.gif" width="67" height="24" border="0" id="navigation_menu_r1_c6" alt="" /></a></td>
          <td><img name="navigation_menu_r1_c7" src="images/navigation_menu_r1_c7.gif" width="2" height="24" border="0" id="navigation_menu_r1_c7" alt="" /></td>
          <td><a href="itservices.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('navigation_menu_r1_c8','','images/navigation_menu_r1_c8_f2.gif',1);"><img name="navigation_menu_r1_c8" src="images/navigation_menu_r1_c8.gif" width="85" height="24" border="0" id="navigation_menu_r1_c8" alt="" /></a></td>
          <td><img name="navigation_menu_r1_c9" src="images/navigation_menu_r1_c9.gif" width="2" height="24" border="0" id="navigation_menu_r1_c9" alt="" /></td>
          <td><a href="helpdesk.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('navigation_menu_r1_c10','','images/navigation_menu_r1_c10_f2.gif',1);"><img name="navigation_menu_r1_c10" src="images/navigation_menu_r1_c10.gif" width="72" height="24" border="0" id="navigation_menu_r1_c10" alt="" /></a></td>
          <td><img name="navigation_menu_r1_c11" src="images/navigation_menu_r1_c11.gif" width="2" height="24" border="0" id="navigation_menu_r1_c11" alt="" /></td>
          <td><a href="staff.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('navigation_menu_r1_c12','','images/navigation_menu_r1_c12_f2.gif',1);"><img name="navigation_menu_r1_c12" src="images/navigation_menu_r1_c12.gif" width="49" height="24" border="0" id="navigation_menu_r1_c12" alt="" /></a></td>
          <td><img name="navigation_menu_r1_c13" src="images/navigation_menu_r1_c13.gif" width="2" height="24" border="0" id="navigation_menu_r1_c13" alt="" /></td>
          <td><a href="contactus.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('navigation_menu_r1_c14','','images/navigation_menu_r1_c14_f2.gif',1);"><img name="navigation_menu_r1_c14" src="images/navigation_menu_r1_c14.gif" width="74" height="24" border="0" id="navigation_menu_r1_c14" alt="" /></a></td>
          <td><img name="navigation_menu_r1_c15" src="images/navigation_menu_r1_c15.gif" width="463" height="24" border="0" id="navigation_menu_r1_c15" alt="" /></td>
          <td><img src="images/spacer.gif" alt="" name="undefined_2" width="1" height="24" border="0" id="undefined_2" /></td>
        </tr>
      </table>
      <div id="MMMenuContainer0503152143_0">
        <div id="MMMenu0503152143_0" onmouseout="MM_menuStartTimeout(100);" onmouseover="MM_menuResetTimeout();"> <a href="network.html" id="MMMenu0503152143_0_Item_0" class="MMMIFVStyleMMMenu0503152143_0" onmouseover="MM_menuOverMenuItem('MMMenu0503152143_0');"> Network&nbsp;Section </a> <a href="webpage.html" id="MMMenu0503152143_0_Item_1" class="MMMIVStyleMMMenu0503152143_0" onmouseover="MM_menuOverMenuItem('MMMenu0503152143_0');"> Webpage&nbsp;Section </a> <a href="hardware.html" id="MMMenu0503152143_0_Item_2" class="MMMIVStyleMMMenu0503152143_0" onmouseover="MM_menuOverMenuItem('MMMenu0503152143_0');"> Hardware&nbsp;Section </a> <a href="database.html" id="MMMenu0503152143_0_Item_3" class="MMMIVStyleMMMenu0503152143_0" onmouseover="MM_menuOverMenuItem('MMMenu0503152143_0');"> Database&nbsp;Section </a> <a href="videoconf.html" id="MMMenu0503152143_0_Item_4" class="MMMIVStyleMMMenu0503152143_0" onmouseover="MM_menuOverMenuItem('MMMenu0503152143_0');"> Video&nbsp;Conferencing </a> </div>
      </div>
    </div>
  </div>
  <div class="features">
    <script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','872','height','258','src','images/IT center features','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','images/IT center features' ); //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="872" height="258">
      <param name="movie" value="images/IT center features.swf" />
      <param name="quality" value="high" />
      <embed src="images/IT center features.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="872" height="258"></embed>
    </object>
  </noscript></div>
  <div class="pic_gallery">
    <div class="gallery_pic"><img src="images/pic_gallery.jpg" alt="" width="128" height="143" /></div>
  </div>
  <div id="main_content"> Content for  id "main_content" Goes Here  </div>
  <div id="footer">
    <div class="footer_pic_salu"><img src="images/salu_black.jpg" width="83" height="82" /></div>
    <div class="footer_text"><table width="500" border="0">
  <tr>
    <td><span class="style1"><a href="index.html">Home</a>  |  <a href="aboutus.html">About us</a>  |  Sections  | <a href="itservices.html">I.T Services</a>  |  <a href="helpdesk.html">Helpdesk</a>  |  <a href="staff.html">Staff</a>  |  <a href="contactus.html">Contact Us</a></span></td>
  </tr>
  <tr>
    <td><span class="style2">Copyright © I.T Center Shah Abdul Latif University 2010 All Rights Reserved</span></td>
  </tr>
  <tr>
    <td><img src="images/designed" /></td>
  </tr>
</table>
</div>
  </div>
  <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats -->
  <br class="clearfloat" />
  <!-- end #container -->
</div>
</body>
</html>

adobe:flash html-css javascript

2 Contributors
4 Replies
256 Views
21 Hours Discussion Span
Latest Post 16 Years Ago Latest Post by Member #334542

Dani AI

Generated 8 Months Ago

This is a classic Flash/HTML stacking issue: the SWF runs in a windowed mode by default so it appears above HTML popups. was right to suggest changing the SWF window mode and adjusting z-index, and ’s follow-up shows that did fix the problem. The notes below clarify how to apply that fix reliably and what to watch for.

Add the wmode parameter to both the <object> and the <embed> (or pass it to AC_FL_RunContent) so the Flash respects normal HTML stacking:

<object width="872" height="258" ...>
  <param name="movie" value="images/IT center features.swf" />
  <param name="wmode" value="opaque" />
  ...
  <embed src="images/IT center features.swf" wmode="opaque" width="872" height="258" ...></embed>
</object>

<!-- or with AC_FL_RunContent -->
AC_FL_RunContent('src','images/IT center features','width','872','height','258','wmode','opaque', ...);

Make sure the popup itself is positioned and has a higher z-index. z-index only works on positioned elements (position: absolute/relative/fixed):

#navmenu { position: absolute; z-index: 9999; }

Cautions and troubleshooting: prefer wmode="opaque" unless transparency is required—transparent can hurt performance and cause focus/behaviour quirks. Confirm the wmode is present in every embed/object variant served to different browsers. If the menu still sits behind, inspect ancestor elements for their own stacking contexts (transforms, opacity < 1, positioned parents with z-index) since those can cap a child’s stacking order. Browser devtools (computed styles and element inspector) make these relationships easy to verify.

All 4 Replies

Member #334542

16 Years Ago

You should look into the Z-index for this kind of issues. and also make your flash swf paramater "Wmode=Transparent".

m-hrt commented: thanks for the z-index help it worked +2

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

m-hrt 0 Light Poster · Answer 1 · 2010-05-06T01:42:19+00:00

m-hrt 0 Light Poster

16 Years Ago

still not working any other ideas

m-hrt 0 Light Poster · Answer 2 · 2010-05-06T02:10:47+00:00

m-hrt 0 Light Poster

16 Years Ago

thanks it worked thanks bro rep added for u :)

Member #334542 · Answer 3 · 2010-05-06T10:31:41+00:00

Member #334542

16 Years Ago

Thanks m-hrt. If solved, please mark as solved.

Edited 16 Years Ago by Member #334542 because: n/a

Popup Menu Hiding under flash swf features bar

Dani AI

Recommended Answers Collapse Answers

All 4 Replies

Recommended Answers