mon jquery navbar n'apparaît pas dans IE8

Question

J'ai recherché une réponse pour cela un peu et je ne suis pas capable de trouver une réponse à mon dilema. Le problème est probablement assez simple mais j'ai fait un cauchemar avec.

J'ai une barre de navigation alimentée par jquery qui modifie l'image d'arrière-plan lorsque vous passez la souris dessus et que vous cliquez dessus. Une fois l'action de clic terminée, il y a un fondu pour afficher l'autre image et masquer une div et montrer l'autre.

Le code fonctionne parfaitement bien dans Firefox et Chrome mais l'écran IE stupide est seulement une barre grise. Lorsque vous cliquez quelque part sur la barre, le changement de div fonctionne donc je ne suis pas sûr de ce qui ne va pas.

Pour afficher la page, cliquez here

Voici le code:

  $(document).ready(function() { 
      navigationPrimary(); 
      menuAction(); 

      $("#pagePlan").hide(); 
      $("#pagePortes").hide(); 
      $("#pageAutre").hide(); 

      function menuAction() {    
      $("#menu li.acceuil").click(function(){ 
       $("#main").show(); 
       $("#pagePlan").hide(); 
       $("#pagePortes").hide(); 
       $("#pageAutre").hide(); 
       $("#menu li.acceuil a").css("background-position","0px -100px"); 
       $("#menu li.plan a").css("background-position","-150px 0px"); 
       $("#menu li.portes a").css("background-position","-300px 0px"); 
       $("#menu li.services a").css("background-position","-450px 0px"); 
       $("#header img.estim").show(); 
       return false;      
      }); 


      $("#menu li.plan").click(function(){ 
       $("#main").hide(); 
       $("#pagePlan").show(); 
       $("#pagePortes").hide(); 
       $("#pageAutre").hide(); 
       $("#menu li.acceuil a").css("background-position","0px 0px"); 
       $("#menu li.plan a").css("background-position","-150px -100px");  
       $("#menu li.portes a").css("background-position","-300px 0px"); 
       $("#menu li.services a").css("background-position","-450px 0px"); 
       $("#header img.estim").hide(); 
       return false;     
      }); 

      $("#menu li.portes").click(function(){ 
       $("#main").hide(); 
       $("#pagePlan").hide(); 
       $("#pagePortes").show(); 
       $("#pageAutre").hide(); 
       $("#menu li.acceuil a").css("background-position","0px 0px"); 
       $("#menu li.plan a").css("background-position","-150px 0px"); 
       $("#menu li.portes a").css("background-position","-300px -100px"); 
       $("#menu li.services a").css("background-position","-450px 0px"); 
       $("#header img.estim").hide();  
       return false;     
      }); 

      $("#menu li.services").click(function(){ 
       $("#main").hide(); 
       $("#pagePlan").hide(); 
       $("#pagePortes").hide(); 
       $("#pageAutre").show(); 
       $("#menu li.acceuil a").css("background-position","0px 0px"); 
       $("#menu li.plan a").css("background-position","-150px 0px"); 
       $("#menu li.portes a").css("background-position","-300px 0px"); 
       $("#menu li.services a").css("background-position","-450px -100px"); 
       $("#header img.estim").hide(); 
       return false;      
      }); 
      } 


     }); 

     function navigationPrimary() { 
     $('#menu li').removeClass('hover'); 
     $('#menu li a') 
      .css({ opacity: 1.0 }) 
      .mouseover(function() { 
       $(this).stop().animate({opacity: 0.0}, 300); 
       }) 
      .mouseout(function() { 
       $(this).stop().animate({opacity: 1.0}, 1000); 
      }); 
     } 

Merci à l'avance

Answer 1

Il ressemble à la LI est dans votre UL sont tous flottants, mais vous n'êtes pas dégager le flotteur. Essayez d'ajouter ceci à votre css, puis en ajoutant la classe clearfix à votre #menu ul

/* >> The Magnificent CLEARFIX: Updated to prevent margin-collapsing on child elements << j.mp/bestclearfix */ 
.clearfix:before, .clearfix:after { 
    content: "\0020"; display: block; height: 0; visibility: hidden; 
} 

.clearfix:after { clear: both; } 
/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */ 
.clearfix { zoom: 1; } 

compliments clearfix de html5boilerplate