How to make the value in submit button ,transparent?

Question

Hi, I have a submit button in a form and i use a css class which sets a background image as the submit button. I need to give a value to this submit button, but i dont want it to be displayed to the user. If i set the css color property to transparent it works fine in my firefox 3.6. But the value gets displayed in ie 6 and 7. How can i solve this problem?

<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

Using the text-indent will work.

Example:

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

Did some little research after the comment of nailxx. IE is a deal breaker (again).

For IE add:

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

Solution

<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

You should try to use instead of in this case.

<button type="submit" name="aa" value="asdf"> <img src="http://www.w3schools.com/images/compatible_safari.gif"/&gt; </button> It should do the trick.