Solved

CSS Drop Down Menu Over Flash

Posted on 2009-06-27
16
500 Views
Last Modified: 2012-05-07
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.
0
Comment
Question by:jsuissa
  • 6
  • 5
  • 3
  • +2
16 Comments
 
LVL 3

Expert Comment

by:dlastlee
Comment Utility
You need to add a transparent to the wmode parameter:
http://wphacks.com/fixing-css-drop-down-menus-hiding-behind-flash-objects/
0
 
LVL 5

Assisted Solution

by:ITGaWD
ITGaWD earned 100 total points
Comment Utility
Could use z-index but only works with position layouts
0
 

Author Comment

by:jsuissa
Comment Utility
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
 
LVL 8

Expert Comment

by:ccarey
Comment Utility
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
 
LVL 3

Expert Comment

by:dlastlee
Comment Utility
@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
 

Author Comment

by:jsuissa
Comment Utility
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
 
LVL 28

Expert Comment

by:chilternPC
Comment Utility
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
 

Author Comment

by:jsuissa
Comment Utility
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 8

Expert Comment

by:ccarey
Comment Utility
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
 

Author Comment

by:jsuissa
Comment Utility
What wouold you suggest to change there? Thanks.
0
 
LVL 8

Accepted Solution

by:
ccarey earned 400 total points
Comment Utility
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
 

Author Comment

by:jsuissa
Comment Utility
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
 
LVL 3

Expert Comment

by:dlastlee
Comment Utility
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
 
LVL 3

Expert Comment

by:dlastlee
Comment Utility
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
 
LVL 3

Expert Comment

by:dlastlee
Comment Utility
Oops... haha, I thought I got points out of it. Sorry, didn't mean it sarcastically.
0
 

Author Comment

by:jsuissa
Comment Utility
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

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Suggested Solutions

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article discusses how to create an extensible mechanism for linked drop downs.
The goal of the tutorial is to teach the user how to how to record live broadcast.
The goal of the tutorial is to teach the user how to select the video input device. Make sure you have an input device that in connected and work and recognized by Adobe Flash Media Live Encoder and select it in the “video input” menu.

763 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now