Problème de bordure

Bonjour à tous,

Je suis en train de coder un design, et je rencontre le problème suivant:
J'ai une "menubar" qui contient les items de menu, qui sont de la même couleur que le fond. Lorsque je fais un rollover sur un des items, son fond devient blanc. Le problème, c'est qu'il reste un tout petit espace gris en haut, mais il paraît quand même trop!

Je vous donne la partie HTML:

   <div id="menubar">
         <div id="menuitem">
           &nbsp;Philosophie&nbsp;     
         </div>
         <div id="menuitem">
           &nbsp;Portfolio&nbsp;     
         </div>
         <div id="menuitem">
           &nbsp;Bon Melon&nbsp;     
         </div>
   </div>

Et la partie CSS:

#menubar {
	width: 32.5em;
	height: 7em;
	top: 25.5em;
	position: relative;
	background-color: #E7E7E9;
}
#menuitem {
	float: right;
	height: 1.65em;
	line-height: 2em;
	color: #E31836;
	font-size: 0.8em;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-weight: 500;
	text-transform:uppercase;
}
#menuitem:hover {
	background-color: #FFFFFF;
}

Quelqu'un saurait-il comment solutioner ce problème?
Merci beaucoup!

FoxLeader
Modifié par FoxLeader (23 Aug 2007 - 20:31)

Bonjour FoxLeader et bienvenue sur Alsacréations,

Tout d'abord, ta page est-elle valide ? Lorsque j'insère ton code dans une page valide, je ne rencontre pas ce problème.

Par ailleurs, les pseudo-classes hover ne sont correctement prises en compte sur IE qu'à partir d'IE7 ; Les versions inférieures n'interprètent pas le rollover sur les éléments autres qu'un lien.

Dans ta "menubar", pourquoi mettre les items au sein de div ? Une liste non ordonnée serait bien plus judicieuse :

<ul id="menubar">
    <li><a href="#">lien 1</a></li>
    <li><a href="#">lien 2</a></li>
    <li><a href="#">lien 3</a></li>
    <li><a href="#">lien 4</a></li>
</ul>

Tes classes "menuitem" ne servent à rien. Tous les items sont affectés donc pour y accéder, il suffit simplement de mettre :

#menubar a { ... }
#menubar a:hover { ... }

Merci (surtout de la rapidité!)

Je vais essayer avec ça et je reviens.
Modifié par FoxLeader (23 Aug 2007 - 20:40)

Euh.... effectivement, quand je mets ça tout seul dans une page, je n'ai pas ce problème.

Mais, je suis ouvert à m'améliorer

Alors pourrais-je avoir un piste plus précise pour avoir un effet similaire, avec un liste?

Edit: Je suis stupide. J'avais mis le design en image de fond pour être sur d'avoir les même grandeurs, et il dépassait. C'était juste pour ça
Modifié par FoxLeader (23 Aug 2007 - 20:55)