Меняется размер меню навигации в разных браузерах.

[Fox88]

Здравствуйте, решил установить себе на сайт вот это меню. Все прошло нормально, меню нормально отображается в Chrome и IE11, но при открытии сайта через Firefox 28 меню укорачивается в длине на 3-4 пикселя. Не понимаю в чем может быть проблема.
 
Снимки проблемы в разных браузерах:
 

 
Код CSS навигации.

/*—————————-	CSS3 Animated Navigation—————————--*/.fancyNav{	/* Affects the UL element */	overflow: hidden;	display: inline-block;}.fancyNav li{	/* Specifying a fallback color and we define CSS3 gradients for the major browsers: */		background-color: #f0f0f0;	background-image: -webkit-gradient(linear,left top, left bottom,from(#fefefe), color-stop(0.5,#f0f0f0), color-stop(0.51, #e6e6e6));	background-image: -moz-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);	background-image: -o-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);	background-image: -ms-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);	background-image: linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);		border-right: 1px solid rgba(9, 9, 9, 0.125);		/* Adding a 1px inset highlight for a more polished efect: */		box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;	-moz-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;	-webkit-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;		position:relative;		float: left;	list-style: none;}.fancyNav li:after{	/* This creates a pseudo element inslide each LI */			content:'.';	text-indent:-9999px;	overflow:hidden;	position:absolute;	width:100%;	height:100%;	top:0;	left:0;	z-index:1;	opacity:0;		/* Gradients! */		background-image:-webkit-gradient(linear, left top, right top, from(rgba(168,168,168,0.5)),color-stop(0.5,rgba(168,168,168,0)), to(rgba(168,168,168,0.5)));	background-image:-moz-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));	background-image:-o-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));	background-image:-ms-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));	background-image:linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));		/* Creating borders with box-shadow. Useful, as they don't affect the size of the element. */		box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;	-moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;	-webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;		/* This will create a smooth transition for the opacity property */		-moz-transition:0.25s all;	-webkit-transition:0.25s all;	-o-transition:0.25s all;	transition:0.25s all;}/* Treating the first LI and li:after elements separately */.fancyNav li:first-child{	border-radius: 4px 0 0 4px;}.fancyNav li:first-child:after,.fancyNav li.selected:first-child:after{	box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;	-moz-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;	-webkit-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;		border-radius:4px 0 0 4px;}.fancyNav li:last-child{	border-radius: 0 4px 4px 0;}/* Treating the last LI and li:after elements separately */.fancyNav li:last-child:after,.fancyNav li.selected:last-child:after{	box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;	-moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;	-webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;		border-radius:0 4px 4px 0;}.fancyNav li:hover:after,.fancyNav li.selected:after,.fancyNav li:target:after{	/* This property triggers the CSS3 transition */	opacity:1;}.fancyNav:hover li.selected:after,.fancyNav:hover li:target:after{	/* Hides the targeted li when we are hovering on the UL */	opacity:0;}.fancyNav li.selected:hover:after,.fancyNav li:target:hover:after{	opacity:1 !important;}/* Styling the anchor elements */.fancyNav li a{	color: #5d5d5d;	display: inline-block;	font: 20px/1 Lobster,Arial,sans-serif;	padding: 12px 34px 14px 34px ;	position: relative;	text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);	z-index:2;	text-decoration:none !important;	white-space:nowrap;}.fancyNav li a:hover {    color: #0099cc; /* Цвет активных ссылок */   }.fancyNav a.homeIcon{	background:url('../img/home.png') no-repeat center center;	display: block;	overflow: hidden;	padding-left: 12px;	padding-right: 12px;	text-indent: -9999px;	width: 20px;}

Код самого меню.

<div id="wb_Menu" style="position: absolute; left: -40px; top: 78px; width: 875px; height: 48px; z-index: 84;"><nav>            <ul class="fancyNav">                <li id="home"><a href="./index.php" class="homeIcon">Главная</a></li>                <li id="about"><a href="./about.php">О компании</a></li>                <li id="catalog"><a href="./catalog.php">Каталог</a></li>                <li id="services"><a href="./services.php">Услуги</a></li>                <li id="news"><a href="./news.php">Новости</a></li>				<li id="contacts"><a href="./contacts.php">Контакты</a></li>            </ul>        </nav></div>

При этом оно находится внутри еще одного div со следующими параметрами CSS.

div#container{   width: 800px;   position: relative;   margin-top: 0px;   margin-left: auto;   margin-right: auto;   text-align: left;}

[npofopr]

А оригинал также ведет себя?

И лучше бы в песочницу выложили или ссылку на сайт дали

[Fox88]

А оригинал также ведет себя?

И лучше бы в песочницу выложили или ссылку на сайт дали

http://fox88.hol.es/

 

Пожалуйста, образец странички сайта, косяк также наблюдается.

Оригинал вроде бы не меняется в разных браузерах.

Edited April 25, 2014 by Fox88