Superfish Css/Jquery Menu passe sous le contenu Flash dans IE7

Question

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

Il fonctionne très bien dans FF3 et IE8 en utilisant SwfObject2 et wmode = transparent, mais pour la vie de moi je ne peux pas obtenir le menu déroulant Ouvrir sur le flash contenu dans IE7. Toute aide serait appréciée.

J'ai essayé de jouer avec les index Z, et pour être honnête, je les comprends un peu. Peut-être y a-t-il une combinaison de choses que je pourrais faire pour régler mon problème?

Merci.

<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> 

Est le script dans ma page d'index.

Z-indexation, c'est le CSS pour les différents DIV

pour le conteneur d'en-tête

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

pour la barre de navigation

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

pour l'élément flash

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

Answer 1

Sa feuille de style pour le site: http://mindfulintegrations.com/signiacapital/css/style.css

La question est en #header contenu qui ajoute une position dans IE7 que vous ne voulez pas:

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

Answer 2

Pourriez-vous élaborer sur ce que vous avez essayé avec les index z?

Ma première recommandation serait d'ajouter un plus grand z-index au div # header-container.

Les index Z dans Internet Explorer peuvent être difficiles car l'élément peut conserver l'index z de son parent.

Answer 3

j'ai trouvé une fonction JS pure qui le corrige dans tous les navigateurs!

là, vous allez:

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); 
     } 
    } 
} 

vous pouvez maintenant juste courir quand la page se charge avec jQuery:

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

Answer 4

les opérations suivantes:

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