HTML input type submit: problem with width on IE

Question

this will be quite difficult to explain. I hope I'm able to.

I recently created a custom ASP.net server control, representing a toolbar. The toolbar contains buttons, so HTML elements. To allow me to add an image I use CSS which add it to the background. The CSS which I apply on the input element looks like this:

.button{
    padding: 2px 2px 2px 2px;
    margin-right: 2px;
    border: 1px solid #999;
    cursor: pointer;
    text-decoration: none;
    color: #606060;
}

Moreover on the button itself (through the style tag; this is because these kind of buttons are rendered automatically and shouldn't be changed by the end-programmer) I have styles which define the background images and some additional settings

background-attachment:scroll;
background-image:url(images/select.png);
background-position:left center;
background-repeat:no-repeat;
padding-left:15px;

The padding-left is needed s.t. the text doesn't go behind the background image. So at the end you would have something like

<input type="submit" style="background-image: url(images/select.png); background-attachment: scroll; background-repeat: no-repeat; background-position: left center; padding-left: 15px;" class="button" id="someId" value="Save" name="someName"/>

On Firefox (as usual) everything works perfectly. My problem is that on IE (tested on IE 7 but I need to be compatible from IE 6+) it happens that if you enter a quite long text as the button text, the button will enlarge, basically the space before and after the button text increases with the size of the text. To have the button still immediately after the image I added the line text-align:right to the button class.

To illustrate it better...
On Firefox:
alt text http://img268.imageshack.us/img268/311/buttonfirefox.jpg

On IE:
alt text http://img23.imageshack.us/img23/2373/buttonie.jpg

Does anyone have any suggestion on how I could fix this??

//Edit:
What I could do of course is to specify a fixed width on the button, till it looks nicely. I would like to avoid this however, if possible.

Answer 1

This is an old bug. You need to add overflow:visible to the button. There is more here:

http://jehiah.cz/archive/button-width-in-ie

and here:

http://www.brandnewbox.co.uk/articles/details/removing_padding_from_ie_buttons/