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.
jsuissaAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

dlastleeCommented:
You need to add a transparent to the wmode parameter:
http://wphacks.com/fixing-css-drop-down-menus-hiding-behind-flash-objects/
0
ITGaWDCommented:
Could use z-index but only works with position layouts
0
jsuissaAuthor Commented:
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.
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

ccareyCommented:
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)



0
dlastleeCommented:
@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.
0
jsuissaAuthor Commented:
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.

0
Peter HartCommented:
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

0
jsuissaAuthor Commented:
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.
0
ccareyCommented:
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


0
jsuissaAuthor Commented:
What wouold you suggest to change there? Thanks.
0
ccareyCommented:
Looks like you're using swfObject version 2.0 (or a modified version of it)

Docs are here:
http://code.google.com/p/swfobject/wiki/documentation

example implementation for your movie:

<div id="sweetCinnamon"> 
     <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>
 
<script type="text/javascript">
var flashvars = {};
var params = {
    wmode : "opaque"
};
var attributes = {};
 
swfobject.embedSWF("templatesImgs/cinnamon.swf", "sweetCinnamon", "425", "282", "8","scripts/expressInstall.swf", flashvars, params, attributes);
</script>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
jsuissaAuthor Commented:
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.
0
dlastleeCommented:
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

0
dlastleeCommented:
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.
0
dlastleeCommented:
Oops... haha, I thought I got points out of it. Sorry, didn't mean it sarcastically.
0
jsuissaAuthor Commented:
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.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.