[Résolu] Problème d'alignement

Bonjour,

Je suis présentement à refaire la barre de menu de mon site et j'ai un problème de rendu sous Chrome et Safari.

quand je passe sur mes lien, le hover devient gris, avec un ligne d'un pixel en haut.
Sous Firefox tout est beau, sous iE également, mais sous Chrome et Safari il manque 1 pixel en bas, ce qui fait qu'on vois le orange du dessous, mais surtout ce pixel manquant fait en sorte que le menu fonctionne moins bien. Si j'ajoute un pixel en bas, ben là sous Firefox c'est pas très beau...

J'ai eu beau essayer d'ajuster de différente façon j'ai pas encore trouvé comment corrigé ça.

page en ligne

code CSS :

#bande{
	position:relative; /*pour placer le menu au-dessus*/
	z-index: 1000;
	clear: both;
	background: url(../interface/menu-background.png) repeat-x top; /*iE*/
	background-size: 100% 100%;
	background-image: -o-linear-gradient(270deg, rgba(255,221,54,1)0%, rgba(255,221,54,0)70%, rgba(255,221,54,0)100%); /*opera 11*/
	background: -webkit-linear-gradient(top, rgba(255,221,54,1)0%, rgba(255,221,54,0)70%, rgba(255,221,54,0)100%); /*Chrome+Safari*/
	background: linear-gradient(180deg, rgba(255,221,54,1)0%, rgba(255,221,54,0)70%, rgba(255,221,54,0)100%); /*future*/
	background-color: #d66f00;
}
	
#nav{
	position:relative; /*pour placer le menu au-dessus*/
	z-index: 1000;
	cursor:pointer;
	font-weight: bold;
	font-variant: small-caps;
	color: #000;
	max-width: 54.5em;
	min-width: 740px;
    margin: 0 auto;
	padding:0 5px;

}
	
#nav ul{
	list-style: none outside none;
	line-height: 1.5;
	list-style: none;
	margin:0;
}
	#nav.EN ul{ width: 49.5em;}
	#IE #nav ul.menu{ width: 55.5em;}
	#IE #nav.EN ul{ width: 51.3em;}
#nav ul ul{
	background: -moz-linear-gradient(0deg, rgba(235,210,183,0),rgba(235,210,183,0.14));/*Firefox*/
	background-image: -o-linear-gradient(90deg, rgba(235,210,183,0),rgba(235,210,183,0.14));/*opera 11*/
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(235,210,183,0.14)), to(rgba(235,210,183,0)), color-stop(0.0, rgba(235,210,183,0.14)), color-stop(1.0, rgba(235,210,183,0))); /*Safari*/
	background: linear-gradient(0deg, rgba(235,210,183,0),rgba(235,210,183,0.14));/*future*/
	background-color: rgba(53,42,31,1);
	border: 1px solid #CD8F2E;
	border-top: none;
	display: none;
	padding: 20px 0;
	position: absolute;
	font-size: 1em;
	margin: 0 auto;
	width: 870px;
}
#nav ul ul ul{
	background: none;
	border: none;
	display: block;
	padding: 0 10px;
	width: 15em;
}
#nav ul a{
	color: #000000;
	text-decoration: none;
}
ul.menu>li{
	border-left: 1px solid rgba(82, 70, 58, 0.1);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
	display: inline;
	font-size: 0.85em;
	line-height: 1.9;
	margin:0;
	padding: 5px 0 4px;
}
	#IE ul.menu>li{ padding-bottom: 5px;}
#nav ul li img{
	margin: 0 0 3px 5px;
	vertical-align: middle;
}
#nav ul ul li{
	border-left: 1px solid rgba(82, 70, 58, 0.1);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
	line-height: 1.54;
	display: block;
    float: left;
	width: 33%;
}
#nav .media ul li{ height: 30px;}

#nav .support ul li:nth-child(3n+3),
#nav .media ul li+li+li,
#nav .produits ul li:nth-child(2n+3){ border-right: none;}

#nav ul ul li:first-child,
#nav .support ul li:first-child, #nav .support ul li:nth-child(3n+4),
#nav .media ul li:first-child, #nav .media ul li:nth-child(3n+4){border-left: none;}
#nav ul ul ul li{
	border: none;
	display: block;
	float: none;
	width: auto;
	height: auto;
}
#nav .contact, #nav .career{margin-right: -6px;}
#nav .accueil a, #nav .contact a {
	padding: 5px 9px 6px;
}
#nav ul ul a{
	display: block;
	padding: 0;
	color: #E3D6C7;
	padding: 2px 20px;
}
#nav ul ul li img{ margin: 10px 10px 10px 0;}
#nav .media .pro img, #nav .media .galerie img{ margin:0;}
#nav .media .galerie img{ margin-left:-13px;}

#nav .cameras, #nav .pro, #nav .galerie{
    height: 413px;
	text-align: center;
}
#nav .produits ul li+li img{
	float: left;
}
#nav .media .pro, #nav .media .galerie{
    height: 300px;
}

#nav li.recherche{ padding-left:3em;}

#nav ul li.toggle{
	background: url(../interface/images/arrow-menu.gif) 95% -30% no-repeat;
	padding-right: 16px;
	padding-left: 9px;
	color: #000;
}
#nav ul li.toggle.support{ background-position: 96% -30%;}
#nav ul li.toggle.media{ background-position: 90% -30%;}
#nav ul ul li.toggle{
	background: url(../interface/images/arrowsNext02.gif) no-repeat 97% -10%;
	padding: 2px 16px 2px 9px;
}
#nav ul li:hover,
#nav ul li:focus{
	box-shadow: inset 0 1px 0px #CD8F2E;
	background-color: rgb(79, 66, 53);
}
#nav ul li:hover,
#nav ul li:focus,
#nav ul li a:hover, 
#nav ul li a:focus, 
#nav ul a:active {
	color: #ffffff;
}
	#IE #nav ul li:hover,
	#IE #nav ul li:focus {background-color: rgba(53,42,31,1);}

#nav .recherche:hover,
#nav .recherche:focus,
#nav ul ul li:hover,
#nav ul ul li:focus,
#nav ul ul li a:hover, 
#nav ul ul li a:focus, 
#nav ul ul a:active {
	box-shadow: none;
	background:none;
}

#nav li.toggle:hover{ background-position: 95% 110%;}
#nav ul li.toggle.distributeurs:hover, #nav ul li.toggle.support:hover{ background-position: 96% 110%;}

#nav ul li:hover ul.subMenu, #nav ul li:focus ul.subMenu,
#nav ul ul li:hover ul.niv3,#nav ul ul li:focus ul.niv3{
	display:block;
	z-index: 2000;
}
#nav form{ float: right;}
#nav form label{padding-left: 10px;}
#nav form input {
	width: 200px;
	margin: 0;
}
#nav form input[type="submit"] {
	background: url(../interface/images/search.png) no-repeat 2% 50% / 90%;
	position: relative;
	border: none;
	margin-right: -20px;
    right: 30px;
    width: 20px;
}

code HTML:

<div id="bande">
    <div id="nav">
        <form role="search" method="get" action="">
			<label for="recherche">
				<input id="recherche" type="text" title="recherche" value="" placeholder="recherche" name="q">
			</label>
			<input id="recherche-submit" type="submit" name="recherche-submit" value="">
 		</form>
        <ul class="menu">
            <li class="accueil">
            	<a href="/FR/"><img src="../interface/images/home.png" width="15" height="15" alt="Accueil" /></a>
            </li>
            <li class="toggle produits">Produits
                <ul class="subMenu">
                    <li class="cameras"><a href="/FR/cameras/">Caméras de surveillance
                    <img src="../Images/photosProduits/BF-10HD/BF-10HD_mini.png" width="97" alt="" /></a>
                        <ul class="niv3">
                            <li><a href="/FR/cameras/IR-Booster/IRB-W.php">Module d'éclairage</a></li>
                            <li><a href="/FR/cameras/accessoires/">Accessoires</a></li>
                            <li><a href="/FR/cameras/dummy.php">Fausses caméras</a></li>
                            <li><a href="/FR/cameras/tous_modeles.php">Fiche de comparaison</a></li>
                            <li><a href="/FR/cameras/avantages.php">Avantages SPYPOINT</a></li>
                        </ul>
                    </li>
                    <li><a href="/FR/produits/cameras-video/"><img src="../Images/photosProduits/X-CEL/X-CEL.png" width="95" height="79" alt="" />Caméra vidéo</a></li>
                    <li><a href="/FR/produits/SDB-85.php"><img src="../Images/photosProduits/SDB-85/SoundBox.png" alt="" width="67" height="81" />"Soundbox"</a></li>
                    <li><a href="/FR/produits/WRL.php"><img src="../Images/photosProduits/WRL/WRL_mini.png" alt="" width="44" height="80" />Détecteur de mouvement</a></li>
                    <li><a href="/FR/produits/produits_audition/"><img src="../Images/photosProduits/Ear-muffs/EEM.png" alt="" width="59" height="80" />Produits d'audition</a></li>
                    <li><a href="/FR/produits/HSC.php"><img src="../Images/photosProduits/HSC/HSC.gif" alt="" width="62" height="79" />Siège Chauffant</a></li>
                    <li><a href="/FR/produits/plein-air.php"><img src="../Images/photosProduits/CQ-SPY.png" alt="" width="111" height="80" />Plein Air</a></li>
                    <li><a href="/FR/produits/produits-dappatage/"><img src="../Images/photosProduits/AT-/saltpaste.gif" alt="" width="62" height="79" />Produits d'appâtage</a></li>
                    <li><a href="/FR/produits/opti-max.php"><img src="../Images/photosProduits/optiMax.png" alt="" width="107" height="80" />Opti-Max</a></li>
                </ul>
            </li>
            <li class="toggle support">Support et service
                <ul class="subMenu">
                    <li><a href="/FR/support-technique/faq.php">FAQ</a></li>
                    <li><a href="/FR/support-technique/manuels.php">Manuels</a></li>
                    <li><a href="/FR/support-technique/maj.php">Mises à jour</a></li>
                    <li><a target="_blank" href="/download/Catalogue2012_low_FR.pdf">Catalogue 2012</a></li>
                    <li><a href="/FR/support-technique/telechargement.php">Fichiers téléchargeables</a></li>
                </ul>
            </li>
            <li class="toggle media">Media
                <ul class="subMenu">
                    <li class="pro">
                        <img src="../Images/Partenaires/HomeCAN/Partenaires_Canada_Intro.png" alt="" width="272" height="139" /><br>
                        Ils parlent de SPYPOINT<br>
                        Pro Staff
                        <ul>
                            <li><a href="/FR/partenaires/pro-staff-canada.php">Canada</a></li>
                            <li><a href="/FR/partenaires/pro-staff-usa.php">États-Unis</a></li>
                            <li><a href="/FR/partenaires/television.php">Télévision</a></li>
                        </ul>
                    <li class="galerie">
                        <a href="/FR/galerie.php">
                            <img width="269" height="126" alt="" src="../Images/accueil/album3.png"><br>
                            Galeries
                  </a></li>
                    <li><a href="/testimonials.php">Témoignages</a></li>
                    <li><a href="/FR/archives.php">Nouvelles</a></li>
                    <li><a href="#">Prix</a></li>
                    <li><a href="/FR/Presse.php">Presse</a></li>
                    <li><a href="/FR/expositions.php">Expositions</a></li>
                </ul>
            </li>
            <li class="contact"><a href="/FR/contact.php">Nous contacter</a></li>
        </ul>
    </div>
</div>

Modifié par juliesunset (06 Mar 2013 - 15:12)

Bonsoir,
associer un line-height (1.9) avec des padding verticaux est casse gueule.
La valeur calculée (ici en em) des interlignes peut varier d'un navigateur à l'autre.
D'autre part, line-height n'est pas pertinent ici sur un élément de rendu inline..
Pour centrer un item verticalement utiliser le line-height seul sur un élément de rendu inline-block OU des padding verticaux égaux (en em de préférence) seuls.

ul.menu > li {
border-left: 1px solid rgba(82, 70, 58, 0.1);
border-right: 1px solid rgba(255, 255, 255, 0.2);
display: inline;
font-size: 0.85em;
line-height: 1.9; /* à retirer*/
margin: 0;
padding: 5px 0 4px;
}

Modifié par Hermann (04 Mar 2013 - 20:34)

MErci pour ta réponse, Hermann.

Donc j'ai enlevé le line-height, et converti mes mesures de padding en em, j'ai aussi enlevé le padding sur les a. J'ai aussi enlevé un autre line-height plus haut dans mon code. J'ai plutôt appliqué un height sur le ul.menu.

Mais j'ai encore le même problème. Sous Firefox et iE9 tout est beau. Mais sous Chrome il y a encore un décalage d'1 pixel vers le haut... Je n'arrive pas à le corriger.

C'est un bug de webkit qui apparait étrangement à un zoom de 100% mais qui n'est plus présent une fois qu'on zoom.
Solution plus plus de précision : convertir les em des padding verticaux en pixel (3 pixel en haut et 4px en bas).
PS: dune manière général et même si c'est moins crutial depuis l'apparition du zoom graphique (zoom homogène de toute l'interface) éviter de contraindre les hauteurs en pixel.

j'ai remis en pixel... aucune changement du côté de Chrome... en plus j'ai remarqué que mon sous-menu est décalé vers le haut de 2 pixel!

juliesunset a écrit :
j'ai remis en pixel... aucune changement du côté de Chrome... en plus j'ai remarqué que mon sous-menu est décalé vers le haut de 2 pixel!

Ça règle au moins le décalage vertical d'1 pixel vers le haut (sur le hover).
Pour un placement précis de ton "sous menu" UL, il vaut mieux te référer à la limite haute du premier ancêtre positionné de manière relative, donc ajouter un top:... adéquate.

Attention, les marges latérales auto n'ont aucun effet sur un élément positionné de manière absolu.

effectivement pour le top: je n'y avais pas pensé!

Cependant j'ai toujours le décalage vers le haut de 1 pixel sous Chrome...

juliesunset a écrit :
effectivement pour le top: je n'y avais pas pensé!

Un positionnement dépendant de la hauteur de la boite en-ligne (dépendante de la valeur de line-height calculée ou déclarée) est trop risqué, puisque la gestion des polices est différente sur chaque navigateur.

juliesunset a écrit :
Cependant j'ai toujours le décalage vers le haut de 1 pixel sous Chrome...

Et le padding top à 3px?

Non, c'est vraiment un décalage de 1 pixel vers le haut. si je met une padding-top 3px et bottom à 6px, ça va sous chrome... mais sous firefox là j'ai l'inverse, un décalage de 1 pixel vers le bas...

juliesunset a écrit :
Non, c'est vraiment un décalage de 1 pixel vers le haut. si je met une padding-top 3px et bottom à 6px, ça va sous chrome... mais sous firefox là j'ai l'inverse, un décalage de 1 pixel vers le bas...

Ah ah les joies des tests navigateurs
Plus tu feras compliqué, plus tu auras de chances d'obtenir ce genre de différences.
Autre solution : donner un height aux li en leur attribuant un display:inline-block

ouin, à l'origine j'avais mis en inline-block.

Dans mon menu je "sépare" les différents sujets par une ligne gris foncé à gauche et pâle à droite de chaque bloc, ça crée du relief.
Le problème avec inline-block ce sont les marges que ça crée à gauche et à droite des bloc. Je doit donc mettre des marges en négatif pour palier à ça. Assé casse-gueule!

juliesunset a écrit :

Le problème avec inline-block ce sont les marges que ça crée à gauche et à droite des bloc. Je doit donc mettre des marges en négatif pour palier à ça. Assé casse-gueule!

Voir ce tuto : http://www.alsacreations.com/astuce/lire/1432-display-inline-block-espaces-indesirables.html

Sinon float:left sur les li avec cette méthode de clearfix sur le conteneur : http://perishablepress.com/new-clearfix-hack/
Modifié par Hermann (05 Mar 2013 - 21:03)

Je suis retourné voir le tutoriel d'alsacréations (je l'avais déjà vue, mais complètement oublié).

Donc j'ai mis mes li en inline-block et appliqué des "<!-- whitespace -->" entre chaque li. Ça a réglé le problème d'espacement. Ensuite j'ai fait les ajustements nécessaire pour que tout soi bien calé. Je n'ai plus de problème de décalage inter-navigateur.

Merci pour ton aide!
Modifié par juliesunset (06 Mar 2013 - 15:12)