HTML input type submit: problem with width on IE

asp.net, css, html

Solution

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/

Problem

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.

Original source