Fox88

http://fox88.hol.es/ Пожалуйста, образец странички сайта, косяк также наблюдается. Оригинал вроде бы не меняется в разных браузерах.

Здравствуйте, решил установить себе на сайт вот это меню. Все прошло нормально, меню нормально отображается в 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;}