Как сделать значение в кнопке отправки прозрачным?

Question

У меня есть кнопка отправки в форме, и я использую класс CSS, который устанавливает фоновое изображение в качестве кнопки отправки. Мне нужно дать значение этой кнопке отправки, но я не хочу, чтобы она отображалась пользователю. Если я установил прозрачное свойство css, то оно отлично работает в моем Firefox 3.6. Но значение отображается в 6 и 7. Как я могу решить эту проблему?

<div  id="upldTempForm" class="pgcontent">
  <form>
    <div style="text-align:center;">
      <input type="submit" name="create" value="" class="save" />
      <input type="button" name="cancel" value="" class="cancel"/>
    </div>
  </form>
</div>

css

.pgcontent {
    background-color:#ECECEC;
    border:2px solid #E7E7E7;
    margin:30px auto;
    width:820px;
    font-size:12px;
}

.save{
    background-image:url("../images/save.gif");
    background-repeat:no-repeat;
    width:100px;
    height:40px;
    cursor:pointer;
    background-color:transparent;
    border:none;    
}

.cancel{
    background-image:url("../images/cancel.gif");
    background-repeat:no-repeat;
    width:110px;
    height:40px;
    cursor:pointer;
    background-color:transparent;
    border:none;
}

Answer 1

Использование текстового отступа будет работать.

Пример:

INPUT[type=button], INPUT[type=submit]
{
    font-weight: bold;

    color: #000000;

    text-indent: -99999px;
    text-align: center;

    background-color: Transparent;
    background-image: url(../images/button.png);
    background-repeat: no-repeat;

    cursor: pointer;
}

Провел небольшое исследование после комментария nailxx. IE снова нарушает условия сделки.

Для IE добавить:

font-size: 0;   
display: block; 
line-height: 0;

Решение

<div  id="upldTempForm" class="pgcontent">
<form>
    <div>
        <input type="submit" name="create" value="Create" class="save" />
        <input type="button" name="cancel" value="Cancel" class="cancel"/>
    </div>
</form>
</div>

css

.pgcontent 
{
    background-color:#ECECEC;
    border:2px solid #E7E7E7;
    margin:30px auto;
    width:820px;
    font-size:12px;
    text-align:center;
}

.save
{
    background-image:url("../images/save.gif");
    background-repeat:no-repeat;
    width:100px;
    height:40px;
    cursor:pointer;
    background-color:transparent;
    border:none;    

    line-height: 100;
    overflow: hidden;
}

.cancel
{
    background-image:url("../images/cancel.gif");
    background-repeat:no-repeat;
    width:110px;
    height:40px;
    cursor:pointer;
    background-color:transparent;
    border:none;

    line-height: 100;
    overflow: hidden;
}

Answer 2

Вы должны попытаться использовать вместо этого.

<button type="submit" name="aa" value="asdf"> <img src="http://www.w3schools.com/images/compatible_safari.gif"/> </button> Это должно сработать.