asked on

CSS Drop Down Menu Over Flash

On my site the drop down GALLERY menu works on every page even over Flash.
However on the SWEET REWARDS page at http://www.marisasimoncakes.com
it gets cut off.

I believe the code and placement methods I'm using are identical between pages so I can't see why. Flahs files on that same site that also use FLVs and work great in Chrome, Firefox, etc.

Thanks in advance for any assistance.

dlastlee

You need to add a transparent to the wmode parameter:
http://wphacks.com/fixing-css-drop-down-menus-hiding-behind-flash-objects/

SOLUTION

ITGaWD

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

jsuissa

ASKER

What is strange is I know about the Wmode transparent but I may have been unclear before because the menu rollover works with other SWFs set to opaque on the same site. That's the strange part.

ccarey

Appears to work ok for me in IE and FF3 - did you fix it already?

You may want to consider using swfObject or something similar to embed the flash... What you're doing with nested object tags thing is likely to cause issues (which would be difficult to debug later)

dlastlee

@jsuissa
It is possible to work around with the opaque setting depending on the div layers either by the order you placed them or explicitly as ITGaWD mentioned. Although, I could never get it right every time especially with different browsers possibly handling it slightly differently. Transparent has been the easiest solution for me.

If you post up the SWEET REWARDS page, we can take a further look if you are still having trouble with it.

jsuissa

ASKER

Hi,

This all sounds about right, but I posted the current implementation of the SWEET REWARDS page:
http://www.marisasimoncakes.com/index.php?/sweet_rewards/

Thank you so much.

Peter Hart

do you know its display the wrong character set ?
some of the text....

We didn't even want to cut it, but weâ¬"re glad we did...it tasted

jsuissa

ASKER

Yup I knew, thought it was UTF-8, so I had to take out special characters or use the full &.... for each symbol.

Besdies the Flash issue the CMS ExpressionEngine isn't rotating between testimonials, which is our big issue now.

Thanks for pointing that out -- appreciate the diligence.

ccarey

I notice you're using SWFObject already (the script is embeded anyway). Try changing the way that movie is embeded and see if it helps

jsuissa

ASKER

What wouold you suggest to change there? Thanks.

ASKER CERTIFIED SOLUTION

ccarey

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

jsuissa

ASKER

It forced the layer down, which I did manually before, but I guess there probably is no way to have it do both things. Thanks for all the help and final code.

dlastlee

If it isn't too late... I think I got the page to work with the format you had before.

Thanks for the points.

<!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" xmlns:spry="http://ns.adobe.com/spry">
<head>
 
<base href="http://www.marisasimoncakes.com/index.php?/sweet_rewards/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
<title>Marisa Simon Cakes</title>
 
 
    <meta name="description" content="Marisa Simon Cakes specialize in creating extraordanary cakes that balance innovative style and traditional elegance." />
    <meta name="keywords" content="Marisa Simon Cakes, confectionary art, pastry, traditional vanilla, traditional chocolate, Brad Simon, unique cakes, custom cakes, wedding cakes" />
    <meta name="copyright" content="Copyright Marisa Simon Cakes" />
    <meta name="author" content="Liquid Comma Design" />
 
    <meta name="email" content="info@marisasimoncakes.com" />
    <meta name="Charset" content="ISO-8859-1" />
    <meta name="Distribution" content="Global" / >
    <meta name="Rating" content="General" />
    <meta name="Robots" content="INDEX,FOLLOW" />
    <meta name="Revisit-after" content="31 Days" />
 
 
<link rel="stylesheet" type="text/css" href="../stylesheets/style.css" />
 <link rel="stylesheet" href="stylesheets/sifr-screen.css" type="text/css" media="screen" />
 <link rel="stylesheet" href="stylesheets/sifr-print.css" type="text/css" media="print" />
 
 
  <script src="scripts/sifr.js" type="text/javascript"></script>
    <script src="scripts/sifr-addons.js" type="text/javascript"></script>
    <script src="scripts/BickhamScriptStd-Semibold_sifr.js" type="text/javascript"></script>
    <script src="scripts/Luxury_Diamond_sifr.js" type="text/javascript"></script>
 
 
<script src="../scripts/swfobject_modified.js" type="text/javascript"></script>
 
<script type="text/javascript">
<!--
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_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_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];}
}
function MM_showHideLayers() { //v9.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3)
  with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
 
<!--//--><![CDATA[//><!--
 
startList = function() {
	if (document.all&&document.getElementById) {
		navRoot = document.getElementById("nav");
		for (i=0; i<navRoot.childNodes.length; i++) {
			node = navRoot.childNodes[i];
			if (node.nodeName=="LI") {
				node.onmouseover=function() {
					this.className+=" over";
				}
				node.onmouseout=function() {
					this.className=this.className.replace(" over", "");
				}
			}
		}
	}
}
window.onload=startList;
 
//--><!]]>
 
//-->
</script>
</head>
 
<body>
<div id="global_wrap">
	<div id="logo_part">
		<h1>Marisa Simon Cakes</h1>
	</div>
	<div id="top_menu">
		<ul>
 
          <li><a href="http://www.marisasimoncakes.com/">HOME</a></li>
			<li><a href="http://www.marisasimoncakes.com/index.php?/pages/about_us/">ABOUT US</a></li>
			<li><a href="http://www.marisasimoncakes.com/index.php?/pages/menu/">MENU</a></li>
<li><a href="#">GALLERY</a>
 
            <ul>
            <li><a href="http://www.marisasimoncakes.com/index.php?/galleries/wedding_cakes/">Wedding Cakes</a></li>
            <li><a href="http://www.marisasimoncakes.com/index.php?/galleries/occasion_cakes/">Occassion Cakes</a></li>
 
       	</ul>
</li>
            <li><a href="http://www.marisasimoncakes.com/index.php?/sweet_rewards/">SWEET REWARDS</a></li>
			<li><a href="http://www.marisasimoncakes.com/index.php?/pages/contact_us/">CONTACT US</a></li>
	  </ul>
  </div>
 
 
<div id="sweetDiv">
 
 
 
    <div id="contactFlash">
      <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="425" height="282">
 
        <param name="movie" value="templatesImgs/cinnamon.swf" />
        <param name="quality" value="high" />
        <param name="wmode" value="opaque" />
        <param name="swfversion" value="8.0.35.0" />
        <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you donâ¬"t want users to see the prompt. -->
        <param name="expressinstall" value="scripts/expressInstall.swf" />
        <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
        <!--[if !IE]>-->
        <object type="application/x-shockwave-flash" data="templatesImgs/cinnamon.swf" width="425" height="282">
 
          <!--<![endif]-->
          <param name="quality" value="high" />
          <param name="wmode" value="opaque" />
          <param name="swfversion" value="8.0.35.0" />
          <param name="expressinstall" value="scripts/expressInstall.swf" />
          <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
          <div>
            <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
 
            <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
          </div>
          <!--[if !IE]>-->
        </object>
        <!--<![endif]-->
      </object>
    </div>
 
<div id="sweetQuote">
 
 
<span id="sweetQuoteText">
<p>All I can say is...WOW!<br />
<br />
My grandfather couldn't believe his eyes when he saw your cake.<br />
We didn't even want to cut it, but weâ¬"re glad we did...it tasted amazing!<br />
<br />
Can I have the recipe? Thanks Again! </p>
</span><!-- End of sweetQuoteText-->
<span id="sweetSig">
<h2>- Lisa Canino Tredici</h2>
<h5>Waldwick, NJ</h5>
 
</span>
 
 
</div><!-- End of sweetQuote -->
 
 
    <div id="rightContact">
    <h3>Contact Us<br />
 
      <br />
    </h3>
    <p>Located in New York City, Marisa Simon Cakes is a boutique, family-owned business specializing in custom cakes for weddings and special events. We serve the greater New York Metropolitan Area.<br />
      <br />
      Feel free to contact us with any questions...</p>
 
<h3><br />
  Marisa Simon</h3>
 
<em>designer/baker</em><br />
<br />
 
<a href="mailto:msimon@marisasimoncakes.com"><span id='eeEncEmail_6m16ftoPJO'>.(JavaScript must be enabled to view this email address)</span><script type="text/javascript">
//<![CDATA[
var l=new Array();
var output = '';
l[0]='>';l[1]='a';l[2]='/';l[3]='<';l[4]=' 109';l[5]=' 111';l[6]=' 99';l[7]=' 46';l[8]=' 115';l[9]=' 101';l[10]=' 107';l[11]=' 97';l[12]=' 99';l[13]=' 110';l[14]=' 111';l[15]=' 109';l[16]=' 105';l[17]=' 115';l[18]=' 97';l[19]=' 115';l[20]=' 105';l[21]=' 114';l[22]=' 97';l[23]=' 109';l[24]=' 64';l[25]=' 110';l[26]=' 111';l[27]=' 109';l[28]=' 105';l[29]=' 115';l[30]=' 109';l[31]='>';l[32]='\"';l[33]=' 109';l[34]=' 111';l[35]=' 99';l[36]=' 46';l[37]=' 115';l[38]=' 101';l[39]=' 107';l[40]=' 97';l[41]=' 99';l[42]=' 110';l[43]=' 111';l[44]=' 109';l[45]=' 105';l[46]=' 115';l[47]=' 97';l[48]=' 115';l[49]=' 105';l[50]=' 114';l[51]=' 97';l[52]=' 109';l[53]=' 64';l[54]=' 110';l[55]=' 111';l[56]=' 109';l[57]=' 105';l[58]=' 115';l[59]=' 109';l[60]=':';l[61]='o';l[62]='t';l[63]='l';l[64]='i';l[65]='a';l[66]='m';l[67]='\"';l[68]='=';l[69]='f';l[70]='e';l[71]='r';l[72]='h';l[73]='a ';l[74]='<';
for (var i = l.length-1; i >= 0; i=i-1){
if (l[i].substring(0, 1) == ' ') output += "&#"+unescape(l[i].substring(1))+";";
else output += unescape(l[i]);
}
document.getElementById('eeEncEmail_6m16ftoPJO').innerHTML = output;
//]]>
</script></a><br />
917.921.0743<br />
<br />
 
 
<h3>Brad Simon</h3>
<em>designer/press inquiries</em><br />
<br />
 
<a href="mailto:bsimon@marisasimoncakes.com"><span id='eeEncEmail_8EVe96JtNr'>.(JavaScript must be enabled to view this email address)</span><script type="text/javascript">
//<![CDATA[
var l=new Array();
var output = '';
l[0]='>';l[1]='a';l[2]='/';l[3]='<';l[4]=' 109';l[5]=' 111';l[6]=' 99';l[7]=' 46';l[8]=' 115';l[9]=' 101';l[10]=' 107';l[11]=' 97';l[12]=' 99';l[13]=' 110';l[14]=' 111';l[15]=' 109';l[16]=' 105';l[17]=' 115';l[18]=' 97';l[19]=' 115';l[20]=' 105';l[21]=' 114';l[22]=' 97';l[23]=' 109';l[24]=' 64';l[25]=' 110';l[26]=' 111';l[27]=' 109';l[28]=' 105';l[29]=' 115';l[30]=' 98';l[31]='>';l[32]='\"';l[33]=' 109';l[34]=' 111';l[35]=' 99';l[36]=' 46';l[37]=' 115';l[38]=' 101';l[39]=' 107';l[40]=' 97';l[41]=' 99';l[42]=' 110';l[43]=' 111';l[44]=' 109';l[45]=' 105';l[46]=' 115';l[47]=' 97';l[48]=' 115';l[49]=' 105';l[50]=' 114';l[51]=' 97';l[52]=' 109';l[53]=' 64';l[54]=' 110';l[55]=' 111';l[56]=' 109';l[57]=' 105';l[58]=' 115';l[59]=' 98';l[60]=':';l[61]='o';l[62]='t';l[63]='l';l[64]='i';l[65]='a';l[66]='m';l[67]='\"';l[68]='=';l[69]='f';l[70]='e';l[71]='r';l[72]='h';l[73]='a ';l[74]='<';
for (var i = l.length-1; i >= 0; i=i-1){
if (l[i].substring(0, 1) == ' ') output += "&#"+unescape(l[i].substring(1))+";";
else output += unescape(l[i]);
}
document.getElementById('eeEncEmail_8EVe96JtNr').innerHTML = output;
//]]>
</script></a><br />
917.209.4913<br />
 
    </div>
 
 
	</div>
    <script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
//-->
    </script>
 
  <div id="footer">
 
    <ul id="footer_left">
			<li style="padding-left:0px;"><span>CONTACT US:</span> &nbsp;917.921.0743</li>
			<li style="border:none;"><a href="mailto:info@marisasimoncakes.com">INFO@MARISASIMONCAKES.COM</a></li>
 
	  </ul>
 
 
 
	  <div id="footer_right">
      <img src="templatesImgs/small_icing.jpg" width="80" height="72" />
      <h6>A Unique Cake For Each Occasion</h6>
 
      <p>Copyright 2009. Marisa Simon Cakes. All rights reserved.</p>
 
      </div>
 
	</div> <!--//footer-->
</div> <!--//global_wrap-->
<script type="text/javascript">
if(typeof sIFR == "function"){
  sIFR.replaceElement(named({sSelector:"body h1", sFlashSrc:"fonts/BickhamScriptStd-Semibold_sifr.swf", sColor:"#754201", sLinkColor:"#754201", sBgColor:"#FFFFFF", sHoverColor:"#754201",
  sFlashVars:"textalign=left"}));
    sIFR.replaceElement(named({sSelector:"body h2", sFlashSrc:"fonts/BickhamScriptStd-Semibold_sifr.swf", sColor:"#754201", sLinkColor:"#754201", sBgColor:"#FFFFFF", sHoverColor:"#754201",
  sFlashVars:"textalign=left"}));
	    sIFR.replaceElement(named({sSelector:"body h3", sFlashSrc:"fonts/Luxury_Diamond_sifr.swf", sColor:"#ffffff", sLinkColor:"#ffffff", sHoverColor:"#333333", sWmode: "transparent", sFlashVars:"textalign=left"}));
			    sIFR.replaceElement(named({sSelector:"body h4", sFlashSrc:"fonts/Luxury_Diamond_sifr.swf", sColor:"#754201", sLinkColor:"#754201", sHoverColor:"#754201", sWmode: "transparent", sFlashVars:"textalign=left"}));
				sIFR.replaceElement(named({sSelector:"body h5", sFlashSrc:"fonts/Luxury_Diamond_sifr.swf", sColor:"#754201", sLinkColor:"#754201", sHoverColor:"#754201", sWmode: "transparent", sFlashVars:"textalign=right"}));
		  sIFR.replaceElement(named({sSelector:"body h6", sFlashSrc:"fonts/BickhamScriptStd-Semibold_sifr.swf", sColor:"#754201", sLinkColor:"#754201", sBgColor:"#FFFFFF", sHoverColor:"#754201",
 sFlashVars:"textalign=right"}));
};
</script>
<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-9506242-1");
pageTracker._trackPageview();
} catch(err) {}</script>
 
</body>
</html>

Open in new window

dlastlee

Sorry, I converted it to HTML... I think the main differences was in your DIV layers, something with your contentDiv, sweetDiv, contactFlash. I didn't quite go through all the CSS properties. I basically took your contact us page, replaced the flash with your sweet flash and copied the div with "All I can say" blurb after the flash section. Anyways.... hope this helps.

dlastlee

Oops... haha, I thought I got points out of it. Sorry, didn't mean it sarcastically.

jsuissa

ASKER

Sorry we had the page working really both ways already. The only thing which is helpful, but we did not try before we posted here is the z-position. Thanks again, its too bad it cannot work the way I want it to.