Ciao a tutti,
ho un problema strano che non riesco a risolvere.
Guardate questo screenshot


In teoria la parte rossa piana (.menuelement) con le scritte "Red", "Orange", etc dovrebbe combaciare con la strisca sopra (rossa con la sfumatura, #contenitore_menu) ma non capisco perché questo non succede e invece sbordi.
Vi posto il codice:
codice:
#contenitore_menu{
	clear:both;
	float:right;
	height:40px;
	max-width:900px;
	margin-top:10px;
	border:#000000 1px solid;
	background:url(../grafica/sfondi/menu.png) repeat-x;
}
	
	.menuelement{
		float: left;
		display: block;
		width: 117px;
		height:40px;
		border-left:#000000 1px solid;
		background-color:#A00000;
	}
l'HTML
codice:
  <div id="contenitore_menu">
    <ul id="menu">
      <li class="menuelement"><span>Red</span>
      <li class="menuelement"><span>Orange</span>
      <li class="menuelement"><span>Yellow</span>
      <li class="menuelement"><span>Green</span>
      <li class="menuelement"><span>Blue</span>
      <li class="menuelement"><span>Indigo</span>
      <li class="menuelement"><span>Violet</span>[/list]
  </div>
spero qualcuno possa aiutarmi,
grazie in anticipo ^^