28172 sujets

CSS et mise en forme, CSS3

Espace bottom-top list IE7 [Résolu]

Bonjour,

Mon menu met un espace entre les li dans IE7.

Svp, j'ai besoin de votre aide. Merci

Voici le lien:
http://demo.suitevox.com/test_divers/index.html


<ul id="sub">
      <li id="current2"><a href="index.html">Accueil</a></li>
      <li><a href="fr/produits-cafe.html">Produits</a></li>
      <li><a href="fr/equipements-cafe.html">&Eacute;quipements</a></li>
      <li><a href="fr/accessoires-cafe.html">Accessoires</a></li>
      <li><a href="fr/services-cafe.html#">Services</a></li>
      <li><a href="fr/clients-cafe.html">Clients</a></li>
      <li><a href="fr/nous-maison-cafe-urbain.html">&Agrave; propos de nous</a></li>
      <li><a href="fr/contact-cafe.html">Contact</a></li>
      <li style="float:left; width:325px; height:46px;background:url(img/nav-bg.png) repeat-y;">&nbsp;</li>
      <div id="navBottom"><img src="img/nav-bottom.png" width="325" height="14" alt=""></div> 
 </ul> 




html, body, ol, ul, li{margin:0; padding:0;}
ul#sub{float:left; width:325px; margin:0; padding:0; list-style:none; font-weight:bold; font-family: 'AvantGardeBkBTBook'; font-size:22px; font-weight:normal;}
ul#sub li{margin:0; padding:0;}
ul#sub a{ display:block; padding: 8px 0 0 40px; height:32px; text-decoration:none; color:#5a4238; background:url(../img/nav.png);}
ul#sub a:hover, ul#sub #current2 a{background: url(../img/navon.png);  color:#cc0e05; padding: 8px 0 0 40px;}
ul#sub #current2 a:hover{background: url(../img/navon.png);  color:#558017; padding: 8px 0 0 40px;}

ul#sub ul#sub2 a{ display:block; padding: 8px 0 0 60px; height:32px; text-decoration:none; color:#5a4238; background:url(../img/sub2.png);}
ul#sub ul#sub2 a:hover, ul#sub ul#sub2 #current3 a{background: url(../img/sub2on.png);  color:#cc0e05; padding: 8px 0 0 60px;}
ul#sub #current2 ul#sub2 #current3 a:hover{background: url(../img/sub2on.png) no-repeat;  color:#558017; padding: 8px 0 0 40px;}

#navBottom{float:left; width:325px;}

Modifié par webberte (18 Feb 2011 - 15:46)
Bonjour,

il est possible que sous IE7 ta liste ne s'adapte pas à son contenu et conserve sa hauteur "logique" (pour IE7 en tout cas ;p )

Essaies de mettre ton "display:block" et "height:32px" sur ton <li>, plutôt que sur ton <a>, il se pourrait que ça résolve ton problème.

Bonne continuation!
J'ai regardé (en vitesse désolé), je ne vois aucun style appliqué à ton sous-menu "#sub2". Possible qu'IE7 ne le prenne pas en compte.. Essaies de lui spécifier une marge par exemple (verticale, juste 1px pour tester), sinon il faudra creuser un peu plus.
De plus, un <ul> au milieu des <li> d'un autre <ul> n'est pas cohérent, il serait préférable de mettre ton deuxième <ul> dans le <li> duquel il dépend (sémantiquement parlant, et "htmlment" parlant).

Je garde ton problème en tête pour le moment,

bon courage!
Merci pour la suggestion Ten, j'ai enlevé le ul dans le ul et j'ai ajusté mon css et ça marche Smiley smile

html =================
<ul id="sub">
<li><a href="../index.html">Accueil</a></li>
<li id="current2"><a href="produits-cafe.html">Produits</a></li>
<li class="sub2"><a href="produits-cafe-02.html">Caf&eacute;</a></li>
<li class="sub2on"><a href="produits-creme-lait-cafe.html">Cr&egrave;me et lait</a></li>
<li class="sub2"><a href="produits-sucre-cafe.html">Sucre</a></li>
<li class="sub2"><a href="produits-filtres-cafe.html">Filtres</a></li>
<li><a href="equipements-cafe.html">&Eacute;quipements</a></li>
<li><a href="accessoires-cafe.html">Accessoires</a></li>
<li><a href="services-cafe.html">Services</a></li>
<li><a href="clients-cafe.html">Clients</a></li>
<li><a href="nous-maison-cafe-urbain.html">&Agrave; propos de nous</a></li>
<li><a href="contact-cafe.html">Contact</a></li>
<li id="espaceBg2_2">&nbsp;</li>
</ul>

Css ==============


ul#sub li{margin:0; padding:0;}
ul#sub a{ display:block; padding: 10px 0 0 38px; height:30px; text-decoration:none; color:#5a4238; background:url(../img/nav.png);}
ul#sub a:hover, ul#sub #current2 a{background: url(../img/navon.png); color:#cc0e05; padding: 10px 0 0 38px;}
ul#sub #current2 a:hover{background: url(../img/navon.png); color:#558017; padding: 10px 0 0 38px;}

ul#sub li.sub2 a{ display:block; padding: 10px 0 0 60px; height:30px; text-decoration:none; color:#5a4238; background:url(../img/sub2.png);}
ul#sub .sub2 a:hover, ul#sub .sub2on a{background: url(../img/sub2on.png); color:#cc0e05; padding: 10px 0 0 60px;}
Sujet clos
Aller à