Почему мое изображение спрайта отрезано?

Question

Я пытаюсь создать ручку для индикатора выполнения на моем веб-сайте. У меня там бар, и он работает отлично, но когда я пытаюсь нарисовать ручку над индикатором выполнения, она отключается. См. Прилагаемый рисунок. Код у меня сейчас:

CSS:

.mejs-controls .mejs-time-rail .mejs-time-handle { 
    position: absolute; 
    display: block; 
    width: 14px; 
    height: 14px; 
    margin-top: -5px; 
    z-index: 1; 
    background: url(../img/sprite.png) 0 -394px; 
} 

HTML (Просто картина, потому что я считаю, что это вопрос CSS):

и это то, что он выглядит как на моей странице:

Кто-нибудь знает, какие могут быть проблемы? Я чувствую, что я близок к его решению, но я мог бы использовать какую-то помощь! Благодарю.

Answer 1

padding-updiv, в котором находится ваш индикатор выполнения, будет работать.

в классе mejs-time-rail, добавьте следующий код: padding-top: 5px; в этом классе. если это не работает, попробуйте увеличить 5px до 10px