Почему мой CSS a:hover работает по-другому в Firefox? ⇐ CSS

[Anonymous]

Вот мой сайт: http://library.skybundle.com/
Наведите указатель мыши на два черных прямоугольника на главной синей панели навигации (область заголовка). a:hover должен изменить цвет на серый. ПРОБЛЕМА в том, что в Chrome это выглядит идеально. Но в Firefox правый отступ недостаточно длинный или что-то в этом роде, поэтому в дальней правой части кнопки «Образовательные курсы» всегда есть небольшой черный прямоугольник (он будет виден только при наведении курсора на кнопку). Другими словами, серый прямоугольник не доходит до правого края области кнопки при наведении курсора мыши. Я просто не понимаю, почему это отлично выглядит и работает в Chrome, но вызывает ошибки в Firefox...
Поверьте мне, когда я говорю, что попробовал все, что мог, чтобы исправить это с помощью Firebug в Firefox. Если вы поиграете с ним, используя редактор в своем браузере, вы увидите, что если вы попытаетесь сделать отступы длиннее для Firefox, вся кнопка переместится на новую строку. Итак, чтобы решить ЭТУ проблему, вы должны сделать контейнер шире, но тогда исходная проблема вернется. Это круг проблем, и я уверен, что один из вас, гениев, найдет простое решение, которого мне не хватает.
Вот мой JSFiddle и код. Обратите внимание, как это выглядит великолепно в Chrome, но не в Firefox?
http://jsfiddle.net/S4st8/
HTML:

• Product Training Videos
• Educational Courses

CSS:
#navigation {
background: url(http://library.skybundle.com/wp-content ... mu-nav.jpg) repeat-x;
margin: 0px;
padding: 0px;
height: 40px;
width: 100%;
}

#navigation-inner {
margin: 0px auto;
padding: 0px;
height: 48px;
width: 960px;
}

#page-nav {
margin: 0px;
padding: 0px;
height: 40px;
width: 960px;
}

div#primary-nav {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
}

ul#top-menu {
margin: -5px 0.325em 0 0.325em;
position: absolute;
padding: 0;
z-index: 100;
top: 0;
left: 3em;
width: 367px;
}

ul#top-menu li {
line-height: 3em;
list-style-type: none;
height: 49px;
background-color: #2C2C2C;
float: left;
}

li#li-right {
list-style-position: inside;
border-left: 2px solid #5E5E5E;
}

ul#top-menu li a {
font-weight: bold;
font-size: 11pt;
text-decoration: none;
padding: 15px 10px 16px 10px;
color: #ffffff;
}

ul#top-menu li a:hover {
text-decoration: none;
width: auto;
color: #ffffff;
background-color: #505354;
padding: 15px 10px 17px 10px;
}


Подробнее здесь: https://stackoverflow.com/questions/198 ... in-firefox