css проблема с т.е.

Question

CSS

.help {
    background: url("/images/info.png") no-repeat scroll center center transparent;
    cursor: pointer;
    height: 16px;
    line-height: 16px;
    margin: 0 5px;
    padding: 2px 8px;
    text-indent: -100px;
}

HTML

1)

<label for="test_1">City Name Sub
   <span title="City Name Sub" class="help">&nbsp;</span>
</label>

2)

<label for="test_2">SMMMC 
   <span title="SMMC Sub" class="help">&nbsp;</span>
</label>

Первая метка показывает правильное изображение с текстом.Но для второго ярлыка получается обрезанное изображение сверху в IE.Любая идея ?Любое решение?

Answer 1

.help {
    background: url("/images/info.png") no-repeat scroll center center transparent;
    cursor: pointer;
    height: 16px;
    line-height: 16px;
    margin: 0 5px;
    padding: 2px 8px;
    text-indent: -100px;
    display: inline-block;
}

Я добавил display: inline-block в мой класс css, и он работает.

Answer 2

Я не знаю, как выглядит ваше изображение, но поможет ли это вам?

CSS ( отредактированные свойства фона и отступа для текста )

.help {
    background: url("/images/info.png") no-repeat scroll right center transparent;
    cursor: pointer;
    height: 16px;
    line-height: 16px;
    margin: 0 5px;
    padding: 2px 8px;
}

HTML

<label for="test_1" class="help" title="City Name Sub">City Name Sub</label>