Проблема, связанная со стилем в IE8

Question

Я использую фоновое изображение для отображения в качестве кнопки. Кнопка хорошо видна во всех версиях Firefox, Chrome, Opera и т. Д. Однако изображение не отображается в IE8. Только изображение не отображается, применяются другие стили классов, такие как ширина, высота и т. Д. Еще более смущает то, что на другой странице (хотя другой класс и таблица стилей) изображение схожих пропорций отображается в аналогичном использовании. Формат изображения JPG. Я копирую правильные атрибуты стиля для обоих случаев, как показано ниже в firebug.

Ни одна из следующих кнопок не отображается. классы кнопок применяются как class = "регистрация кнопки корзины", class = "обновление кнопки корзины", class = "проверка кнопки корзины" и class = "продолжение кнопки корзины" и находятся внутри некоторых элементов div.

.cart-button{
    height: 28px;
    cursor: pointer;
    border: none;
    float: left;
}

.cart-button:hover{
        background-position: 0 -28px;
}

.login{
    width: 58px;
    background:url(/../../templates/animalcare/i/login.jpg)no-repeat;
    margin:0 0 20px 0;
    clear: both;
}

.update{
        width: 63px;
        background:url(/../../templates/animalcare/i/update.jpg)no-repeat;
        margin:0 0 20px 15px;
        float: left;
    }

.checkout{
        width: 77px;
        background:url(/../../templates/animalcare/i/checkout.jpg)no-repeat;
        float:right;
        margin:0 25px 30px 10px;
    }

.continue{
        width: 132px;
        background:url(/../../templates/animalcare/i/continue.jpg)no-repeat;
        float:right;
        margin:0 0 30px 0px;
    }

Ниже приведена единственная отображаемая кнопка изображения. Он расположен внутри стола. Он находится в другой таблице стилей - отсюда и разница в пути.

.add-to-cart{
    width:102px;
    height:28px;
    float:left;
    background:url(i/add_to_cart.jpg) no-repeat;
    cursor:pointer;
    border:none;
    margin:10px 0 5px 0;
}

.add-to-cart:hover{
    background-position:0 -28px;
}

Answer 1

Не могу не заметить, что отображаемое изображение имеет пробел перед no-repeat, в то время как те, которые этого не делают, - нет. Интересно, может ли это быть проблемой? E.g.:

.login{
    width: 58px;
    background:url(/../../templates/animalcare/i/login.jpg) no-repeat;
                                                           ^
                                                           +-- add this space
    margin:0 0 20px 0;
    clear: both;
}

(и все остальные).