[Résolu] Décalage des marges sous safari

Bonjour à tous,
Webdesigner junior, je suis bloquée sur un problème d'harmonisation de marges sous safari/ chrome / FF.
Je n'ai même pas regardé encore sur IE.. Chaque chose en son temps.
J'ai écumé pas mal de réponses de forums mais malgré cela je n'arrive toujours pas à résoudre ce pb.
Tout se passe bien sur chrome et FF, c'est Safari qui pose pb.
J'ai un menu déroulant, caché au départ, puis qui se déroule vers la droite quand on clique sur le logo.
Et Safari me fait automatiquement tout basculer sur 2 lignes. J'ai beau jouer sur les margin/ padding ça ne change pas grand chose. Le menu est composé d'une <ul> qui contient des <li> et quand je mets une hauteur à ces 2 éléments, tout est réglé sous safari, mais ça décale tout sur chrome et FF !

<div class="bandeau">

<ul id="navigation">
	
			<li> <a href="#" id="blindLeftToggle"></a> </li>
			
			<li>
				<div class="outer">
		    		<div class="box">
						<ul id="menu">
							<li><a href="#propos">A PROPOS</a></li>
							<li><a href="#workinprogress">REALISATIONS</a> </li>
							<li><a href="#photo">PHOTOGRAPHIE</a></li>
							<li><a href="http://lae.tumblr.com/" target="_blank">BLOG</a></li>
							<li><a href="#contact">CONTACT</a></li>
						</ul>
		    		</div>
				</div>
			</li>
		</ul>	<!-- FIN de barre de nav --> 

Et la partie CSS :

.area {
    min-height: 180px;

}

.bandeau {
	width: 100%;	
	background-color:white;
	position: fixed;
	top: 0;
	left: 0; 
	z-index: 100;
}

#navigation {
	width: 960px; 
	margin: auto;
	border: 0px solid blue;
	margin-top: 0;

}

#navigation ul {
	/* height: 45px;  NEW*/
	max-width: 1024px;
	/*min-width: 960px;  */
	border: 0px solid red;
	padding-left: 10px; 
	margin: 0 auto;
}

#navigation li {
	display: inline-block;
	border:0px solid black;
	padding-bottom: 0px; 
	font-size: 1.2em;
	/* height: 45px;*/

}

#navigation li:first-child{
	padding-left: 20px; 
} 

#menu li{
	padding-right: 35px; 
	padding-bottom: 15px; 

}

#menu li:first-child{
	padding-left: 20px; 
}

#navigation li:last-child {
	margin-right: 10px; 
} 


#navigation li a {
	border:0px solid blue;
	text-decoration: none;
	text-align: center;
}

#blindLeftToggle {
	background: url('../images/logo4.svg') 2px 1px no-repeat; 
	width: 80px; 
	height:45px; 
	border:0;
	display:block; 
	margin:0 0 0 0; 
	margin-top: 10px; 
	padding-bottom: 5px; 
}

#blindLeftToggle:visited {border: 0; border-width:0;}
#blindLeftToggle:focus{
	outline: none; /* affichage FF */
}

.outer {
    overflow: hidden;
    -webkit-transition: all .4s;
    
}

.outer .box {
	margin-left: -1200px; 
    color: black;
    text-align: center;
    
} /* FIN de BARRE DE NAV */

Un grand merci par avance à ceux qui pourront m'aider !
Modifié par Laetiparis (05 Nov 2014 - 12:38)

Bonjour, c'est assez dur de débugguer à la volée comme ça... Même si on copie colle le bout de code dans un jsfiddle ça ne fonctionne... tu n'aurais pas un exemple en ligne ? ou bien reproduire juste le menu dans un jsfiddle ?

Laurent, en effet ce sera plus clair avec un jsfiddle :
http://jsfiddle.net/Laetiparis/ozha8yq6/16/
Sauf que ça fonctionne relativement bien sur le jsfiddle, hormis un léger décalage... Alors que lorsque je regarde mon fichier HTML sur safari ça passe clairement à la ligne en dessous.. Je ne comprends pas !
Merci en tous cas
Laëtitia
Modifié par Laetiparis (05 Nov 2014 - 16:24)

Yes, merci.
Ca vient de l'alignement de tes #navigation > li
Ton bloc #navigation à des li en inline-block qui ne font pas la même taille et ne sont pas aligné l'un par rapport à l'autre. Sous Safari ça donne un alignement bizarre.
Je te dirais donc de placer un vertical-align sur tes li, avec comme valeur top, middle ou bottom selon ce que tu veux (et il faudra ajuster un peu la hauteur des li du sous menu car ils ont un padding qu'en bas et ca déséquilibre un peu le tout...)

Merci Laurent, ça fonctionne !
En effet j'ai mis une hauteur max aux <li> ainsi qu'un vertical align : bottom ; et ai ajusté les padding top et bottom ensuite.
C'est nickel partout, merci