Menu vises forskelligt

Hej.

Jeg har et problem med en menu der skal laves i class elementer.

Jeg kan ikke få den til at være ens i firefox og safari og chrom.

Du kan se her hvad problemet er: http://braendestablen.businesscatalyst.com/

Det er nemmere at se det, end jeg skal til at forklare det.

Min menu css ser sådan ud:

.menu-item {
    height: 55px;
    width: 150px;
    padding-right: 30px;
    padding-left: 30px;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #666666;
    padding-top: 35px;
    text-align: center;
}

.menu-item-hover {
    height: 55px;
    width: 150px;
    padding-right: 30px;
    padding-left: 30px;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #666666;
    color: #9A0034;
    padding-top: 35px;
    cursor: pointer;
    text-align: center;
}

.menu-item-selected {
    height: 55px;
    width: 150px;
    padding-right: 30px;
    padding-left: 30px;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #666666;
    color: #9A0034;
    padding-top: 35px;
    text-align: center;
}

.menu-item_web {
    height: 55px;
    width: 150px;
    padding-right: 30px;
    padding-left: 30px;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #666666;
    padding-top: 35px;
    text-align: center;
    background-color: #9A0034;
    background: -moz-linear-gradient(100% 100% 90deg, #7B0034, #9A0034);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#9A0034), to(#7B0034));
    color:#FFFFFF
}