[RÉGLÉ] menu horizontal s'affiche en deux lignes

[juju33el]

Bonjour à tous,
J'ai un petit souci avec mon menu (aligné à droite avec la propriété de float:right), qui s'affiche correctement dans Chrome, mais pas dans Mozilla ni IE. Le dernier lien passe dans la deuxième ligne. Pourtant la classe de menu n'est pas limité par une largeur particulière. Est-ce que quelqu’un pourrait me mettre sur une piste pour résoudre ce problème, svp?
Le lien vers le site:http://hotel-revest-ste-maxime.com/
Voici le code html de mon menu:

<div id="nav" class="container_12">
 <div id="navcontainer" class="grid_12">
  <ul class="menu">
   <li class="item-101 first"><a href="/" >Accueil</a></li>
   <li class="item-185"><a href="/hotel-le-revest-ste-maxime" title="hotel ste maxime" >Hôtel Le Revest</a></li>
   <li class="item-186"><a href="/chambres-ste-maxime" >Chambres</a></li>
   <li class="item-201 current active"><a href="/restaurant" >Restaurant</a></li>
   <li class="item-188"><a href="/reserver-ste-maxime" >Réserver</a></li>
   <li class="item-232"><a href="/galerie" >Galerie</a></li>
   <li class="item-189"><a href="/nous-trouver-ste-maxime" >Nous trouver</a></li>
   <li class="item-190 last"><a href="/contact-ste-maxime" >Contact</a></li>
  </ul>
 </div>
</div>   	  

et son css:

#nav {border-bottom: 1px solid #999;}
#nav ul.menu {margin: 0;padding: 0 ;float:right;}
ul.menu, ul.menu li{margin: 0;padding: 0 0 8px 0;display: inline;list-style-type: none;}
ul.menu li a, ul.menu li a:link, ul.menu li a:visited{float: left;line-height: 14px;font-weight: bold;margin: 0 0.1% 0px 0.1%;padding:8px 10px 10px 10px; text-decoration: none;color: #999;font-variant: small-caps;font-weight:lighter;text-align: right;font-size:130%;font-family:'Georgia', Arial, Helvetica, sans-serif; font-style:normal;}
ul.menu a:link#current, ul.menu a:visited#current, ul.menu li a:hover{ padding:8px 10px 8px 10px;background: transparent;color: #555;border: 1px solid #eee;}
ul.menu li.active a { padding:8px 10px 8px 10px;}
ul.menu li#current a{ padding:8px 10px 8px 10px;}
ul.menu a:hover { color: #000; }
li.current , li.current :visited{color:#555!important;}

(J'ai enlevé les propriétés concernant les coins arrondis etc. pour raccourcir le code)
Merci d'avance pour toutes les pistes

[lomart]

Re : menu horizontal s'affiche en deux lignes

Bonsoir,
ça devrait mieux aller avec la modif en rouge dans le css

#nav {border-bottom: 1px solid #999;} #nav ul.menu {margin: 0;padding: 0 ;float:right;} ul.menu, ul.menu li{margin: 0;padding: 0 0 8px 0;display: inline-block;list-style-type: none;}

[juju33el]

Re : menu horizontal s'affiche en deux lignes

Génial! Merci beaucoup, ça marche à merveille avec Mozilla. IE comme d'habitude "boude" mon css, mais je vais lui faire une feuille de styles à part.
Merci encore et bonne soirée