March 04, 2004

Ridiculous Auto-Padding in IE (Win) Submit Buttons

I hope someone has a suggestion to get around one of the nasty "features" coming from Redmond:

Internet Explorer on Windows has some funny logic implemented to add some PADDING to SUBMIT-Buttons (<input type=Submit>) of forms. The Longer the content/text of the VALUE tag is, the more PADDING it adds automagically. Thus we have real ugly looking form buttons on our pages which take up valuable space.
This padding can not (to my knowledge) be set using CSS.

I'd appreciate if anyone knowing of a workaround to get rid of the padding IE is adding could let me know.

Look at the grey buttons in the screenshot below (click on the image for larger display) to get a picture of what i am talking about:

Posted in: by seiz | Comments (6)



Thanks for the link, but it provided only a partial solution.

I don't want to specify the width of my button due to accessibility and internationisation issues and I cam up with this.

input.button {
padding: 0 2px; width: auto; overflow: visible;

works a treat in all browsers (including IE)


I found a workaround here. The idea is to use the ie star hack and to apply the style "overflow: visible;"



You are correct as to the reasons for fake email address. What I failed to include in my message is that you need to specify width for each button your are using plus associate it with the class in my previous post.

For example:

input type="submit" name="requestInfo" value="Request Info/Samples/Quote" class="button" style="width: 185px;"

The reason for defining the margins and padding is that it allows you to better control the look of elements and also makes it render moreconsistenty in various browsers.

Hope this helps. I will be checking the comments in case you have any other questions.




couldn't email you as you provided a fake email (for antispam measures i assume).

Unfortunately, the whole reason for this post is, that IE Windows doesn't give a shit about padding and margin settings in a stylesheet ;-(



Hope this helps:

First define a class in your CSS file:

.button {
margin: 0px;
padding: 2px;
font-family: Verdana, sans-serif;
font-size: 11px;
color: #333;
text-align: center;

Apply this style to all buttons in your application. Then, for each separate button add style definition within tags to adjust it to the content. For example:

I also define certain attributes for the form tag as those vary between browsers and sometimes can throw layouts off.




I just finally wound up looking this up and found somewhat of a solution by setting the width to whatever looks good for each button, using CSS. It's a good idea to set the font style and size, too, so the overflow won't get clipped. See for the discussion where I found this.

Post a comment