28173 sujets

CSS et mise en forme, CSS3

Bonjour,

J'ai un menu horizontal et juste en dessous une banniere qui touche le menu. Du moins sur Firefox car sous IE j'ai un espace de 4px entre les 2.
Le problème, je pense viens de la ligne "font: normal 12px/37px Arial, sans-serif; " indiquant la hauteur de la zone de texte qui est au maximum pour la bordure.

Merci d'avance !


CODE HTML :
<div id="menu">
<ul>
<li><a href="http://">Lien</a></li>
<li><a href="http://">Lien</a></li>
</ul>
</div>
<div id="banniere">
</div>

CODE CSS:
#menu
{
text-align:center;
height:33px;
background: #ffffff url(bg_nav.gif) repeat-x;
}

#menu ul
{
margin: 0;
padding: 0;
list-style-type: none;

}

#menu ul li
{
display: inline;
margin-left:-3px;
}

#menu ul li a
{
font: normal 12px/37px Arial, sans-serif;
text-decoration: none; /* texte pas souligné*/
padding: .5em 2em; /* hauteur , espacement entre texte */
border-left: 1px solid #999999;
color:#666666;

}

#banniere{
width: 700px;
height: 174px;
background: #fff0ff url(ban.jpg) no-repeat;
}
Modifié par spectroms (04 Apr 2006 - 15:28)
en effet, cela est un bug sous IE, pour y remedier, il faut utiliser la propriété line-height à zéro dans le contenant de ta bannière et du menu. (line-height:0px;)
Oh merci beaucoup !
Je ne savais pas du tout et j'ai cherché longtemp sans succés.

Toute fois, celà ma décalé mon menu vers le haut.
Je débute un peu donc je ne sais pas comment le recentrer.
L'extrait de ma page sur :
http://membres.lycos.fr/unico/

PS: désolé pour la pub lycos Smiley fache