28172 sujets

CSS et mise en forme, CSS3

Bonjour,

J'ai un problème concernant mon menu déroulant horizontal: celui de la compatibilité entre navigateur. Et c'est avec Internet Explorer que j'ai ce problème.

En effet, sur Firefox, mon menu déroulant horizontal se "déroule" normalement. Mais sur IE, il se déroule en faisant des blocs de trois. Autrement dit, sur Firefox j'ai par exemple 9 élements déroulant, mais sur IE je me retrouve avec 3X3 élements.

Que faire? Voici mon code html ainsi que la Css associée.

Merci beaucoup

Elodie

HTML

<!-- Navigation Level 2 (Drop-down menus) -->
        <div class="nav2">
        
          <!-- Navigation item -->
          <ul>
            <li><a href="index.html">Accueil</a></li>
          </ul>
          
          <!-- Navigation item -->
          <ul>
            <li><a href="#">Qui sommes-nous?<!--[if IE 7]><!--></a><!--<![endif]-->
              <!--[if lte IE 6]><table><tr><td><![endif]-->
                <ul>
                  <li><a href="#">Le Foyer</a></li>
                  <li><a href="#">Status</a></li>
                  <li><a href="#">Contacts</a></li>
                  <li><a href="#">Partenaires</a></li>
                  </ul>
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
            </li>
          </ul>         
          
          <!-- Navigation item -->
          <ul>
            <li><a href="#">Activités sportives<!--[if IE 7]><!--></a><!--<![endif]-->
              <!--[if lte IE 6]><table><tr><td><![endif]-->
                <ul>
                  <li><a href="#">Aikido</a></li>
                  <li><a href="#">Badminton</a></li>
                  <li><a href="#">Basket</a></li>
                  <li><a href="#">Judo</a></li>
                  <li><a href="#">Jujitsu</a></li>
                  <li><a href="#">Gym enfants</a></li>
                  <li><a href="#">Gym tonique</a></li>
                  <li><a href="#">Gym chinoise</a></li>
                  <li><a href="#">Gym entretien</a></li>
                  <li><a href="#">Step</a></li>
                  <li><a href="#">Yoga adultes</a></li>
                  <li><a href="#">Yoga enfants</a></li>
                </ul>
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
             </li>
          </ul>  
          
          <!-- Navigation item -->
          <ul>
            <li><a href="#">Activités culturelles<!--[if IE 7]><!--></a><!--<![endif]-->
              <!--[if lte IE 6]><table><tr><td><![endif]-->
                <ul>
                  <li><a href="#">Aquarelle</a></li>
                  <li><a href="#">Chorale</a></li>
                  <li><a href="#">Encadrement</a></li>
                  <li><a href="#">Musique</a></li>
                  <li><a href="#">Danse classique</a></li>
                  <li><a href="#">Danse moderne</a></li>
                  <li><a href="#">Danse orientale</a></li>
                  <li><a href="#">Danse de salon</a></li>
                  <li><a href="#">Guitare</a></li>
                 </ul>
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
             </li>
          </ul>   
          
          <!-- Navigation item -->
          <ul>
            <li><a href="#">Actualités<!--[if IE 7]><!--></a><!--<![endif]-->
             <!--[if lte IE 6]><table><tr><td><![endif]-->
                <ul>
                  <li><a href="#">Presse</a></li>
                  <li><a href="#">Rencontres sportives</a></li>
                  <li><a href="#">Spectacles</a></li>
                </ul>
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
             </li>
          </ul>         
        </div>
          </div>


CSS

.nav2 {float:left; width:850px; border:none; background:#242426 url(../img/bg_head_bottom_nav.jpg) repeat-x; color:rgb(75,75,75); font-size:1.0em; font-size:100%;} /*Color navigation bar normal mode*/
.nav2 ul {list-style-type:none;}
.nav2 ul li {float:left; position:relative; z-index:1000; border-right:solid 1px #000000;}
.nav2 ul li ul {display:none; border:none;}
.nav2 ul li ul {margin-left:-30px; padding:0 30px 30px 30px; background:url(../img/bg_head_bottom_nav_hover.gif) top center;} /*Sticky hover zones*/
.nav2 ul li a {float:left; display:block; height:3.1em; line-height:3.1em; margin-right:0px !important /*Non-IE6*/; margin-right:-4px /*IE6*/; padding:0 16px 0 16px; text-decoration:none; font-weight:bold; color: rgb(100,100,100);}
.nav2 ul li:hover {width:auto;}
.nav2 table {position:absolute; z-index:999; top:0; left:0; border-collapse:collapse; font-family:"trebuchet ms",arial,sans-serif;}

/*Non-IE6*/
.nav2 ul li:hover a {background-color:#242426; text-decoration:none; color:#CCCCCC} /*Color main cells hovering mode*/
.nav2 ul li:hover ul {display:block; position:absolute; z-index:998; top:3.0em; margin-top:0.1em; left:0;}
.nav2 ul li:hover ul li ul {display: none;}
.nav2 ul li:hover ul li a {display:block; width:10em; height:auto; line-height:1.3em; margin-left:-1px; padding:4px 16px 4px 16px; border-left:solid 1px #242426; border-bottom: solid 1px #242426; background-color:#bad709; font-weight:normal; color:rgb(50,50,50);} /*Color subcells normal mode*/
.nav2 ul li:hover ul li a:hover {background-color:#a8cc06; text-decoration:none;} /*Color subcells hovering mode*/

/*IE6*/
.nav2 ul li a:hover {background-color:#242426; text-decoration:none; color:#CCCCCC} /*Color main cells hovering mode*/
.nav2 ul li a:hover ul {display:block; position:absolute;z-index: 998; top:3.1em; t\op:3.0em; left:0; marg\in-top:0.1em;}
.nav2 ul li a:hover ul li a {display:block; width:10em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px rgb(175,175,175); border-bottom: solid 1px rgb(175,175,175); background-color:#bad709; font-weight:normal; color:rgb(50,50,50);} /*Color subcells normal mode*/
.nav2 ul li a:hover ul li a ul {visibility:hidden; height:0px; width:0px; position:absolute; z-index: 997;}
.nav2 ul li a:hover ul li a:hover {background-color:#a8cc06; text-decoration:none;} /*Color subcells hovering mode*/