Probleme de Width sur LI/UL

[devkunfry]

Bonjour j'ai construit pour mon site un menu horizontal de navigation basé sur du CSS et des listes (ul/li) tout marche à peu pres bien dans les deux browsers de référence (FF et IE) mais une fois n'est pas coutume j'ai un pb avec FF 1.5 en effet j'ai donné à ma barre de navigation une width=750px et un arriere plan orange. dans iE toute la barre est orange, dans FF au bout de la barre de navigation à droite il y a un espace blanc d'enviroon 10px ce qui laisse croire que la barre de navigation n'occupe pas tout l'espace qui lui est offert. J'aimerai savoir comment corriger cette erreur... mon code css et xhtml suivent!

CSS

/* Positionning & Structure of 1st Level Menu */
#navigation {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 750px;
	display: block;
	background-color: #DA5D09;
	}
/* Positionning & Structure for Sub-Menus */
#navigation ul{
	display:block;
	/*margin:0;*/
	padding:0;
	list-style: none;
	margin: 0;
	background-color: #DA5D09;
	border-style: solid;
	border-color: #fff;
	border: 1px;

	}

#navigation li ul {
	position: absolute;
	top: 173px;
	display: none;
	}

/* Structure for 1st level Menu Items */
#navigation li {
	list-style: none;
	width: 124px;
	height: auto;
	display: block;
	float: left;
	margin: 0;
	padding: 0;
	background-color: #DA5D09;
	}
/* Structure for Sub-Menu Items */
#navigation li li {
  display: block;
	float: none;
	margin: 0;
	padding: 0;
	list-style: none;
	width: 124px;
}


/* Styles for 1st level Menu Items */
#navigation li a{
	text-align: center;
	background: #DA5D09;
	border-width: 0 2px 0 0;
	border-color: #fff;
	border-style: solid;
	color: #fff;
	font-size: 11px;
	font-weight: bold;
	display: block;
	text-decoration: none;
	padding: 10px 0;
	margin: 0;
		}
/* Styles for Sub-Menu Items */
#navigation li li a{
	text-align:left;
	background: #DA5D09;
	border-width: 1px 0 0 0;
	border-color: #fff;
	border-style: solid;
	font-size: 10px;
	display: block;
	text-decoration: none;
	padding: 5px;
	margin: 0px;
		}
/* The magic */
#navigation li:hover ul, #navigation li.over ul { display: block; }

The XHTML

<ul id="navigation">
	<li><a href="#">Home</a></li>
	<li><a href="#">Features</a>
	  <ul>
		<li><a href="#">Muzik News</a></li>
		<li><a href="#">Interviews</a></li>
		<li><a href="#">Reviews</a></li>
	  </ul>
	</li>
	<li><a href="#">Lifestyle</a>
	  <ul>
		<li><a href="#">Urban reports</a></li>
		<li><a href="#">Style & Gear</a></li>
		<li><a href="#">Sports Corner</a></li>
	  </ul>
	</li>
	<li><a href="#">Community</a>
	  <ul>
		<li><a href="#">Forums</a></li>
		<li><a href="#">Gallery</a></li>
		<li><a href="#">Calendar</a></li>
	  </ul>
	</li>
	<li><a href="#">Muzik</a>
	  <ul>
		<li><a href="#">Muzik Lounge</a></li>
		<li><a href="#">Online Radios</a></li>
	  </ul>
	</li>
	<li><a id="lastright"  href="#">Muzik Store</a></li>
  </ul>

The navigation UL is included in a global div (that contains the entire page) of 750 px as well!

Merci d'avance!

Modifié 6 Juillet 2006 par devkunfry

[MarvinLeRouge]

Salut,

Sauf erreur de ma part :

1 li = 124px de large

6 li = 744px de large (donc 6px manquent)

Indique la largeur de ton ul dans ta CSS si tu souhaites juste masquer l'espace restant. Sinon, donne des largeurs qui provoquent un total égal à la largeur du ul.

NB : non testé

[devkunfry]

j'ai essayé le 750/6 minus les bordurs etc... mais bon ca n'a pas fonctionné j'ai plutot opté pour un petit hack que j'ai trouvé en fouillant à gauche à droite sur positionisverything.net!

Merci pour l'aide!