If an input is given a type "button" or "submit" and the value used to apply text to the button is over 18 characters long, the button is shown stretched horizontally. The top and bottom border is also thicker. The effect increases with the length of the button text used.
Test page Workaround is not included
Reported by: Chris Hester.
Explorer 5-6 Windows, Explorer 7 | Reported on 5 January 2006.
This site is no longer maintained. I’m sorry, but it’s just too much work for too little return. You can continue to browse old bug reports, though.
Search reports by browser:
2 Posted by Clint on 11 January 2006 | Permalink
IE workaround:
* html .button {overflow:visible;width:auto;padding-left:0.3em;padding-right:0.3em;}
3 Posted by Daniel on 18 January 2006 | Permalink
Clint's workaround does work for the button itself, but if the button is located within a container (i.e a td tag) IE unfortunately still renders it as if the button was as wide as with the extra width. Anyone has a solution for that?
4 Posted by Matt on 31 January 2006 | Permalink
Remove the * html at the beginning of that line, simply name the class (in this case .button), and use it and it should work. My buttons are inside of TD tags and they are properly handled. For example:
.formSubmit { background-color: #F7DD00; cursor: hand; overflow:visible; width:auto; padding-left:0.3em; padding-right:0.3em; }
5 Posted by dgx on 21 May 2007 | Permalink
The workaround working in all browsers and inside tables is here http://www.dgx.cz/trine/item/the-stretched-buttons-problem-in-ie
1 Posted by Milo van der Leij on 5 January 2006 | Permalink
One workaround is to apply a style to the button (as done on quirksmode). However, you run the risk of making your buttons harder to be recognized as such.