Himas Rafeek
Posted on: 1 year ago

text-indent on submit buttons

IE not interpreting text-indent on submit buttons ?

How it works

Let’s see how it works.

font-size:0 is used to reduce the font size and works well in IE7. But even after adding this line, you would notice a black line(which is basically the text) on the center of the button in IE6.

display:block Negative text-indent works in IE only if this is added.

line-height: 0 Another fix for IE6.

                                          input.button {
    width: 114px;
    height: 37px;
    border: none;
    background: transparent url("images/submit_btn.gif") no-repeat center;
    overflow: hidden;
    text-indent: -999px;
    font-size: 0;
    display: block;
    line-height: 0;