28173 sujets

CSS et mise en forme, CSS3

[Résolu] Problème d'espacement dans un menu deroulant sur IE

Bonjour,

voila j'ai trouvé un script pour me faire un menu déroulant. Le problème que j'ai est que quand j'ai un sous menu il y a un petit espacement entre les éléments du premier niveau uniquement sur IE7...
comme on peut le voir sur cette image :
http://img261.imageshack.us/img261/7881/bugcsscz6.th.jpg

ou bien sur le site a cette adresse:
http://staging.uniteloverval.be/

la CSS ce trouver ici :http://staging.uniteloverval.be/design/css/screen.css

voici le code HTML ça sera peut être plus facile


<div class="menu">
      <ul id="menu">
        <li><a href="#">Unité</a>
          <ul>
            <li><a href="#">Fédérations</a>
              <ul>
                <li><a href="content/gcb.php">Les guides</a></li>
                <li><a href="content/fcs.php">Les Scouts</a></li>
              </ul>
            </li>
            <li><a href="#">Uniforme</a>
              <ul>
                <li><a href="#">Guides</a></li>
                <li><a href="#">Scouts</a></li>
              </ul>
            </li>
            <li><a href="agenda-unite-7.html">Agenda</a></li>
            <li><a href="news-unite-7.html">News</a></li>
            <li><a href="galerie-unite-7.html">Photos</a></li>
            <li><a href="staff-unite-7.html">Staff</a></li>
          </ul>
        </li>
      </ul>
      <div class="clr"></div>
    </div>


Et le code CSS : 



.menu { position:absolute; text-align:left; top:0; width:730px; margin:50px 0 0 3px}
#menu{ margin:0 auto;}
.menu a,
.menu a:link,
.menu a:active,
.menu a:visited{ color:#FFF; text-decoration:none}
.menu a:hover{ color:#FFF; text-decoration:none}
.menu ul{margin:0; padding:0; list-style-type:none; background:none;}
.menu ul li{position:relative; display:inline; font-weight:bold; float:left; height:25px; margin:0 5px 0 0 ; background:url(../images/bgMenu.gif) repeat-x;}
.menu ul li a{ display:block; border:solid #6b8a9c; border-width:0 1px 1px 1px; width:80px; padding:5px 8px; text-decoration:none;}
.menu ul li ul{left:0; position:absolute; top:1em; display:block; visibility:hidden; width:103px;}
.menu ul li ul li{display:list-item; float:none; background:#80abbc;}
.menu ul li ul li ul{left:159px; top:0; border:none; padding:0; margin:0;}
.menu ul li ul li a,
.menu ul li ul li a:link,
.menu ul li ul li a:active
.menu ul li ul li a:visited{display:block; border:none; width:81px; color:#fff; text-decoration:none; }
.menu ul li ul li a:hover{ background:#6b8a9c; text-decoration:none}
.menu ul li a:hover{ color:white; text-decoration:none;}

.menu .mainfoldericon{color:#FFF}

* html p#iepara{ padding-top:1em; }
* html .menu ul li { float:left; height:1%; }
* html .menu ul li a { height:1%; }



est ce que quelqu'un a une idée pour corriger cela ?

Merci d'avance ...
Modifié par gunthbar (09 Sep 2007 - 00:53)
Bonjour,
tu n'as pas mis ton image en ligne.
Je suppose que tu veux parler de l'espace entre chaque rub.
Si c'est le cas tu n'as pas bien cherché :
tu as un margin: 0 5px 0 0 au niveau des les LI.
sorry j'avais oublier ...

par contre le bug est dans le menu qui est déroulé entre chaque élément qui contient un sous élément...
Modérateur
bonsoir,

plutot que d'appliquer un : height:1%; (ou width:xx;) pour activer le layout sur tes li , fait usage d'un float:left; ,
vu que tes balise <a> sont dimensionnés cela devrait convenir.

GC
Sujet clos
Aller à