Question

input.icon 
{
    border: 0;    
    cursor: pointer;
    margin: 0;
    padding: 0;
    width: 16px;
    height: 16px;
    text-indent: -1000em;
}
input.edit {         
    background: transparent url('/edit.png') no-repeat center top; 
}

On an element like:

<input type="submit" class="icon edit" onclick="...." />

It renders fine in firefox, without the text on the image also. In IE it shows the text of the value attribute.

Why is that?
Actually i’m not even setting the value attribute and it is defaulting to ‘submit query’.

Also, I thought my CSS could be more specific by doing:

input.icon {
...
}
input.icon .edit {
...
}

But that didn’t work for me not sure why, so I changed the 2nd definition too:

input.edit {
..
}

Why didn’t input.icon .edit work?

Could I just as well put these styles on a div element? What’s the difference?

Answer 1

You’ve got a few questions there. For the first one. I’m not seeing the issue in IE8:

http://jsfiddle.net/rfYrq/

I do not see the text in IE8.

---

Question 2: “Why didn’t input.icon .edit work?”

The meaning of input.icon .edit is, any element with the class of edit within an input element with a class of icon. What you really wanted was any input with both the edit and icon classes. That would be like this:

input.icon.edit

---

Question 3: “Could I just as well put these styles on a div element?”

Yes. If you are overriding the style of the button with your own css and apparently overriding the functionality of the button with an onclick, you can just use a div or a span or some other element depending on your situation.