IE7 and IE6 Input Button Width Bug

December 16, 2009, by A. U. Crawford

IE determines the width of an input button based on the length of the value.

So an input like:

has a padding right and left of say 8px, but

has a padding left and right of 12px.

I know right?

The fix is simple though. You just have to give the input button “overflow: visible;”.

The HTML:

<br /> <input class="button" type="submit" value="Go" /><br />`

The CSS:

<br /> input.button {<br /> overflow: visible;<br /> }<br />`
Then you can add whatever padding your want.

2 thoughts on “IE7 and IE6 Input Button Width Bug

Comments are closed.