[Résolu] [JQuery] Décalage du sous-menu sous IE8 (FF3 ok)

Bonjour!

Je suis actuellement en train de refaire mon site (pour la version précédente j'étais déjà venu sur cet excellent site et votre aide avait été précieuse! ) et j'ai décidé d'utiliser la méthode décrite dans le tutoriel d'alsacréations pour réaliser un menu déroulant.

Après pas mal de bidouillage, j'obtiens un résultat satisfaisant sur Firefox 3. Mais, horreur, en testant sur Internet Explorer 8, la mise en forme des sous-menu est différente: ils sont décalés sur la gauche (tout en restant à l'intérieur sur la droite). Comme des images parlent plus que des mots:

Firefox

http://chrispics.free.fr/chrispicsdivers/pb_jquery_ff.jpg

Internet Explorer

http://chrispics.free.fr/chrispicsdivers/pb_jquery_ie.jpg

J'ai effectué une recherche sur le forum mais je n'ai pas vu de problème qui ressemblait au mien. Je vous mets le code:

CSS

.navigation {
      margin: 0 auto;
	  margin-top: 25px;
	  margin-bottom: 30px;
      padding: 0;
	  color: #000;
      background: #fff;
      width: 489px;
      }
  .navigation a, .navigation span {
      display: block;
      padding-top: 1px;
	  padding-bottom: 1px;
      color: #fff;
	  text-align: center;
      text-decoration: none;
	  margin: 2px 0;
	  padding-top: 3px;
	  padding-bottom: 5px;
	  font-weight: bold;
      background: #3578E4 url(kit/accordeon_lexique.gif);
      }
   .navigation a:hover, .navigation a:focus, .navigation a:active {
      text-decoration: none;
      }
   .navigation .subMenu {
      font-size: 14px;
      background: #fff;
      padding: 0px;
	  border: 1px dotted black;
      }
   .subMenu a {
      text-align: left; 
      font-size: 12px;
      background: #fff;
	  color: #000;
      padding: 0px;
	  font-weight: normal;
      }
   .subMenu a:hover {
      background: #deedf6;
      }
   .navigation .subMenu li {
      margin-right: 2px;
      margin-left: 2px;
      margin-top: 2px;
      margin-bottom: 2px;
	  font-size: 12px;
      }

Javascript

 <!--
  $(document).ready( function () {
    $(".navigation ul.subMenu").hide();  
    $(".navigation li.toggleSubMenu span").each( function () {
        var TexteSpan = $(this).text();
        $(this).replaceWith('<a href="" title="Cliquez pour dérouler la liste">' + TexteSpan + '<\/a>') ;
    } ) ;    

    $(".navigation li.toggleSubMenu > a").click( function () {
        if ($(this).next("ul.subMenu:visible").length != 0) {
            $(this).next("ul.subMenu").slideUp("normal");
        }
        else {
            $(".navigation ul.subMenu").slideUp("normal");
            $(this).next("ul.subMenu").slideDown("normal");
        }
        return false;
    });    
	
  } ) ;
  // -->

HTML

<ul class="navigation">
      <li class="toggleSubMenu"><span>Tours : 136 photos</span>
        <ul class="subMenu">
                    <li><a href="tourscentrevillemontpellier.php"><img src="kit/puceliste.gif" alt="*" border="0"/>&nbsp;Tours du Centre-Ville - 29 photos</a></li>
		            <li><a href="toursmossonhautsdemassane.php"><img src="kit/puceliste.gif" alt="*" border="0"/>&nbsp;Tours des quartiers Mosson et Hauts de Massane - 34 photos</a></li>
		            <li><a href="tourdebionne.php"><img src="kit/puceliste.gif" alt="*" border="0"/>&nbsp;Tour de Bionne (~114m) - 8 photos</a></li>
		            <li><a href="tourletriangle.php"><img src="kit/puceliste.gif" alt="*" border="0"/>&nbsp;Tour Le Triangle (72m) - 19 photos</a></li>
		            <li><a href="tourpolygone.php"><img src="kit/puceliste.gif" alt="*" border="0"/>&nbsp;Tour Polygone (59m) - 14 photos</a></li>
		            <li><a href="toursaintmartin.php"><img src="kit/puceliste.gif" alt="*" border="0"/>&nbsp;Tour Saint Martin (56m) - 5 photos</a></li>
		            <li><a href="tourslenouveaumonde.php"><img src="kit/puceliste.gif" alt="*" border="0"/>&nbsp;Tours du complexe Le Nouveau Monde (55m) - 14 photos</a></li>
		            <li><a href="hotelderegionlanguedocroussillon.php"><img src="kit/puceliste.gif" alt="*" border="0"/>&nbsp;Hôtel de Région Languedoc-Roussillon (50m) - 13 photos</a></li>
        </ul>
      </li>
      [...]
  </ul>

Si je comprends bien, cela pourrait venir de la class subMenu.

Voila, si vous avez une idée... merci

Chrispic
Modifié par Chrispic (15 Jun 2009 - 21:15)

Au hasard, si tu changes ton margin: 0 auto; (.navigation) par un truc du genre margin: 0;, ça change quelque chose ?

Rajoute un "margin:0" dans ton .navigation .subMenu

.navigation .subMenu {
    font-size: 14px;
    background: #fff;
    padding: 0px;
    border: 1px dotted black;
    margin: 0;
}

Merci Alpher, le problème est résolu avec ton margin

Merci quand même SynRJ (ta méthode ne marche pas).

A bientôt, et encore merci!

Gniih mais j'étais pas loin !