views:

340

answers:

5

Hey guys, I've got a neat dropdown menu and also a flashfile in my webpage. Now when I hover the menu and it expands. It's behind the flash... The problem is only in IE 7

Here's my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <link rel="stylesheet" href="reset.css" type="text/css" />
    <link rel="stylesheet" href="stijl.css" type="text/css" />
    <title>The dons customs</title>
    <script src="AC_RunActiveContent.js" type="text/javascript"></script>
    <script type="text/javascript">
    sfHover = function() {
     var sfEls = document.getElementById("nav").getElementsByTagName("LI");
     for (var i=0; i<sfEls.length; i++) {
      sfEls[i].onmouseover=function() {
       this.className+=" sfhover";
      }
      sfEls[i].onmouseout=function() {
       this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
      }
     }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    </script>
    <!--[if lte IE 8]>
    <style type="text/css">
     #menu_cont ul li ul { display: block; margin: 15px 0 0 -40px; }
    </style>
<![endif]-->
</head>
<body>
<div id="everything">
    <div id="bar"></div>
    <div id="container">
     <div id="head"><img src="images/head.jpg" alt="The dons customs header" /></div>
     <div id="menu">
      <div id="menu_links"><img src="images/menu_links.png" alt="Menu links" /></div>
      <div id="menu-container">
       <div id="menu_cont">
        <ul id="nav">
         <li><a href="#">Button</a></li>
         <li><a href="#">Button</a>
          <ul>
           <li><a href="#">item 1</a></li>
           <li class="cross"><a href="#">item 2</a></li>
           <li class="last"><a href="#">item 3</a></li>
          </ul>
         </li>
         <li><a href="#">Button</a></li><li><a href="#">Button</a></li>
         <li><a href="#">Button</a></li><li><a href="#">Button</a></li>
        </ul>
       </div>
      </div>
      <div id="menu_rechts"><img src="images/menu_rechts.png" alt="Menu rechts" /></div>
     </div>
     <div id="main">
      <div id="links">
       <div id="flashcontent">
         <script type="text/javascript">
         AC_FL_RunContent(
           'codebase',
           'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0',
           'width','100%',
           'height','190',
           'src', 'lowrider',
           'quality','high',
           'pluginspage','http://www.macromedia.com/go/getflashplayer',
           'movie','lowrider',
           'wmode','opaque'); //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=7,0,19,0" width="100%" height="190">
           <param name="movie" value="lowrider.swf" />
           <param name="WMode" value="Transparent" />
           <param name="quality" value="high" />
           <embed src="lowrider.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="100%" height="190" wmode="transparent"></embed>
          </object>
         </noscript>
       </div>
       <div class="button">
        <p>Bedrijfsinformatie</p>
       </div>
       <div class="info">
        <p class="informatie">
         <strong>Cms name</strong>
         <br /><br />
         Contact persoon: Directeur Kuiper<br />
         Adres:   Rijksweg 100 <br />
         Postcode/Plaats: 3453 AA Amsterdam<br />
         Telefoon:  06 123412341<br />
         <br />
         KVK nummer:   012343124 <br /> 
         BTW: NL 738593843B01
        </p>
       </div>

      </div>
      <div id="midden">
       <div id="lijnboven">
        <div id="lijnonder">
         <div id="lijnlinks">
          <div id="lijnrechts">
           <div id="hoeklinksboven">
            <div id="hoekrechtsboven">
             <div id="hoekrechtsonder">
              <div id="hoeklinksonder">
               <div id="content">
                <h1>Home</h1>
                 <br />
                <p><img src="images/banner.jpg" alt="Banner auto's" /></p>
                <p><br /></p>
                 <p class="text">Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. </p>

<p class="text">Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi.</p>

<p class="text">Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci. Phasellus consectetuer vestibulum elit. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Vestibulum fringilla pede sit amet augue. In turpis. Pellentesque posuere. Praesent turpis.</p>
                <br />
               </div>
              </div>
             </div>
            </div>
           </div>
          </div>
         </div>
        </div>
       </div>
      </div>
     </div>
    </div>
    <div id="footer">
     <p>&copy; <strong>The Don's Customs</strong> | Alle rechten voorbehouden | Algemene voorwaarden</p>
    </div>
</div>
</body>
</html>

I've added the wmmode but it doesn't seem to help...

A: 

try changing this line:

 'wmode','opaque'); //end AC code

to

'wmode','transparent'); //end AC code
jacobangel
that doesn't work. It stays the same
Vince2doom
A: 

You've got two different wmodes:

'wmode','opaque'); //end AC code 

<embed src="lowrider.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="100%" height="190" wmode="transparent"></embed>

Pick whichever one you're supposed to use. Opaque I think.

Sean
Hey, Sean, that doesn't work eather. I've tested it, still the same...
Vince2doom
Look into z-index. Opaque will give you the best performance.
Sean
I've added a lower z-index to the flashcontent, but the problem still remains...
Vince2doom
+2  A: 

I'd maybe use a different embed method, maybe it's not passing the wmode correctly in ie7? I'd try swfobject: http://code.google.com/p/swfobject/. The wmode should work.

Also, just noticed that your capialization is all weird in your object tags: you have:

<param name="WMode" value="Transparent" />

try changing that to

<param name="wmode" value="opaque" />

(If you don't feel like using swfobject that is... I'd recommend you try it though, there aren't so many places to specify the wmode at the very least;) )

quoo
hey quoo, thanks for your reply. I've tried to change the capitalisation, but that wasn't the problem... I will try swfobject.
Vince2doom
A: 

There is another trick for such problems, which is not the best but quickest i believe. If it is not so important, you can hide flash content when dropdown menu is triggered.

hope it helps,

Sinan.

Sinan Y.
A: 

Set the wmode to be opaque or transparent, doesn't matter. Then give #menu a higher z-index than #main. Make sure that both #menu and #main have either position set (to either relative, absolute, or static) to enable z-index to work.

Jason Berry