[Résolu] Menu qui n'est pas en vertical-align sur Safari

Bonjour à tous,

J'ai un comportement étrange sous Safari pour mon menu. Celui-ci vient se "coller" en haut de ma navigation alors que je veux qu'il soit centré en hauteur. C'est nickel sous Firefox et Chrome.
Une idée ?

		    	<a href="<?php bloginfo("url"); ?>"><h1 id="logo" class="ir alignright">Blue room, studio de création graphique et de web agency</h1></a>
				<ul id="menu" class="visible-desktop">
                	<li class="links">
                		<a id="about-linker" href="#about" title="Le studio blue room">Born</a>
					</li>
					<li class="links">
                		<a id="services-linker" href="#services" title="Les services">Create</a>
					</li>
					<li class="links">
                		<a id="portfolio-linker" href="#portfolio" title="Le portfolio">Love</a>
					</li>
					<li class="links">
                		<a id="showcase-linker" href="#showcase" title="Les références">Die</a>
					</li>
					<li class="links">
                		<a id="contact-linker" href="#contact" title="Contacter le studio">Heaven</a>
					</li>
					<li class="links">
                		<a id="blog-linker" href="<?php bloginfo("title"); ?>" title="Le blog et news du studio">Hell</a>
					</li>
					<li>
						<?php get_search_form(); ?>
					</li>
				</ul>
			</nav>

#navigation { width: 100%; z-index: 1000; position:fixed; top:0; background: rgba(0,0,0,0.7); vertical-align:middle; }
#navigation #logo { display: block; background: url(img/blueroom_logo.png) 0 0 no-repeat; background-size: contain; margin:5px 20px; -webkit-transition: all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition:all 0.3s ease-in-out; opacity: 0.6; }
#navigation #logo:hover { opacity: 1; transform: scale( 1.2) }
#navigation ul li { display: inline; font-family: 'Titillium Web', sans-serif; }
#menu { margin-right: 20px !important; }
#navigation a, #skrollr-body #navigation a:active, #skrollr-body #navigation a:visited { color:#c9c9c9; font-size: 100%; letter-spacing: 1px; padding: 3px; text-decoration: none; text-transform: uppercase; -webkit-transition: all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition:all 0.3s ease-in-out;}
#navigation a:hover { color: #fff;}
#navigation ul li a.lighted { color: #7dc3ff!important; }

Merci de vos réponses.

J'ai testé ton code, mais c'est bizarre, j'ai l'impression de ne pas reproduire ton problème de menu "collé en haut", j'ai le même rendu sur Chrome et Safari. Evidemment, tout ce CSS3 sur IE<10, c'est cata, mais pourtant j'obtiens encore les mêmes positionnements sur IE9...

Au cas où, voilà des screenshots de ce que j'obtiens en copiant/collant ton code :
Chrome :
http://www.filiiip.net/chrome.jpg
Safari :
http://www.filiiip.net/safari.jpg
Modifié par petibato (06 Sep 2013 - 20:46)

Je t'ai envoyé en message privé le log et pass de l'URL.
Merci de ton aide.

La capture de ce que j'ai :

Modifié par Jeff 2 Papangue (07 Sep 2013 - 07:14)

Ok, j'ai résolu ton bug avec cette légère modif (par rapport au code que tu as posté sur ce forum) :

#navigation ul {display:inline-block;}

L'ul étant inline, le vertical-align s'applique correctement : encore un article génial d'Alsacréations

Et comme ça, ça marche, chez toi ?

Merci à toi ça fonctionne ! Bien que le vertical-align:middle ne soit pas pris en compte. le fait de mettre

#navigation ul { display:inline-block; }

avec un margin-top:25px, c'est impeccable.

Merci encore de ton aide.