css problem with ie?

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>
</labe开发者_开发知识库l>

First lable shows proper image with text. But for the second label getting cropped image from the top in IE. Any Idea ? Any Solution ?

I don't know what your Image looks like, but would this help you ?

CSS ( edited background and text-indent properties )

.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>

.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;
}

I have added display: inline-block to my css class and it works.