Superfish Css/JQuery Menü geht unter Flash-Inhalt in IE7

Question

http://mindfulintegrations.com/signiacapital/index.html

Es funktioniert gut in FF3 und IE8 mit SwfObject2 und Wmode = transparent, aber für das Leben von mir kann ich das Menü nicht bekommen über den Blitz Dropdown Inhalt in IE7. Jede Hilfe wäre willkommen.

Ich habe versucht, mit Z-Indizes zu spielen, und um ehrlich zu sein, ist mein Verständnis von ihnen etwas niedrig. Vielleicht gibt es eine Kombination von Dingen, die ich tun könnte, um mein Problem zu beheben?

Danke.

<script type="text/javascript" src="flash/swfobject.js"></script> 
    <script type="text/javascript"> 
     var flashvars = {}; 
     var params = {}; 
     params.wmode = "transparent"; 
     var attributes = {}; 
     attributes.id = "homemovie"; 
     swfobject.embedSWF("flash/home_movie.swf", "homemovie", "1024", "330", "9.0.0", false, flashvars, params, attributes); 
    </script> 

Ist das Skript in meiner Indexseite.

Für Z-Indizierung, das ist die CSS für die verschiedenen von DIV

für den Header Container

#header-container{ position:relative; height:140px; background-color:#FFFFFF; width:100%; z-index:2; } 

für die navbar

#navbar{ position:absolute; left: 300px; top:90px; clear:both; z-index:1; } 

für das Flash-Element

#homemovie{ 
height:330px 
position:absolute; 
z-index:-1; 
} 

Answer 1

Sein Ihr Stylesheet für den Standort: http://mindfulintegrations.com/signiacapital/css/style.css

Das Problem ist in # Kopf Inhalt, der eine Position in IE7 hinzufügt, die Sie nicht wollen:

 
#header-container{ 
/**position:relative;**/ /**Overwrites superfish fix for IE7, remove and should work.**/ 
height:140px; 
background-color:#FFFFFF; 
width:100%; 
} 

Answer 2

Könnten Sie näher erläutern, was Sie mit z-indexes versucht haben?

Meine erste Empfehlung wäre ein Hinzufügen eines größeren Z-Index zum # Header-Container div.

Z-Indizes in Internet Explorer können schwierig sein, weil Element den Z-Index des übergeordneten Elements behalten kann.

Answer 3

ich gefunden habe, eine reine JS-Funktion, die es in allen Browsern behebt!

los gehts:

function fix_flash() { 
    // loop through every embed tag on the site 
    var embeds = document.getElementsByTagName('embed'); 
    for (i = 0; i < embeds.length; i++) { 
     embed = embeds[i]; 
     var new_embed; 
     // everything but Firefox & Konqueror 
     if (embed.outerHTML) { 
      var html = embed.outerHTML; 
      // replace an existing wmode parameter 
      if (html.match(/wmode\s*=\s*('|")[a-zA-Z]+('|")/i)) 
       new_embed = html.replace(/wmode\s*=\s*('|")window('|")/i, "wmode='transparent'"); 
      // add a new wmode parameter 
      else 
       new_embed = html.replace(/<embed\s/i, "<embed wmode='transparent' "); 
      // replace the old embed object with the fixed version 
      embed.insertAdjacentHTML('beforeBegin', new_embed); 
      embed.parentNode.removeChild(embed); 
     } else { 
      // cloneNode is buggy in some versions of Safari & Opera, but works fine in FF 
      new_embed = embed.cloneNode(true); 
      if (!new_embed.getAttribute('wmode') || new_embed.getAttribute('wmode').toLowerCase() == 'window') 
       new_embed.setAttribute('wmode', 'transparent'); 
      embed.parentNode.replaceChild(new_embed, embed); 
     } 
    } 
    // loop through every object tag on the site 
    var objects = document.getElementsByTagName('object'); 
    for (i = 0; i < objects.length; i++) { 
     object = objects[i]; 
     var new_object; 
     // object is an IE specific tag so we can use outerHTML here 
     if (object.outerHTML) { 
      var html = object.outerHTML; 
      // replace an existing wmode parameter 
      if (html.match(/<param\s+name\s*=\s*('|")wmode('|")\s+value\s*=\s*('|")[a-zA-Z]+('|")\s*\/?\>/i)) 
       new_object = html.replace(/<param\s+name\s*=\s*('|")wmode('|")\s+value\s*=\s*('|")window('|")\s*\/?\>/i, "<param name='wmode' value='transparent' />"); 
      // add a new wmode parameter 
      else 
       new_object = html.replace(/<\/object\>/i, "<param name='wmode' value='transparent' />\n</object>"); 
      // loop through each of the param tags 
      var children = object.childNodes; 
      for (j = 0; j < children.length; j++) { 
       try { 
        if (children[j] != null) { 
         var theName = children[j].getAttribute('name'); 
         if (theName != null && theName.match(/flashvars/i)) { 
          new_object = new_object.replace(/<param\s+name\s*=\s*('|")flashvars('|")\s+value\s*=\s*('|")[^'"]*('|")\s*\/?\>/i, "<param name='flashvars' value='" + children[j].getAttribute('value') + "' />"); 
         } 
        } 
       } 
       catch (err) { 
       } 
      } 
      // replace the old embed object with the fixed versiony 
      object.insertAdjacentHTML('beforeBegin', new_object); 
      object.parentNode.removeChild(object); 
     } 
    } 
} 

jetzt können Sie nur in ausgeführt werden, wenn die Seite geladen mit jQuery:

$(document).ready(function() { 
      fix_flash();  
} 

Answer 4

Versuchen Sie Folgendes:

.sf-menu a, sf-menu a:hover,sf-menu a.sfHover, .sf-menu li, .sf-menu li li { 
    z-index:1; 
}