I noticed that IE sometimes has very large padding around button text. It seems to be proportional to the amount of text the button has. This makes for very ugly buttons.
I am hesitant to make buttons with fixed width because of internationalization issues. Same goes for percent widths.
How has people dealt with this short of styling DIVs like buttons?
Here is a fix that works for me:
<!--[if IE]>
<style type="text/css">
input {
overflow: visible;
padding-left:2px;
padding-right:2px;
}
</style>
<![endif]-->
I never noticed this until your posted this question - but you're right. The amount of padding on the button seems to be a "percentage" of the length of text, which means it gets much wider when you add more text to the button.
If it is just buttons you want to adjust the behaviour on, this works:
input[type='button'] {
overflow: visible;
}
You don't need to make this conditional as it doesn't affect the button display in other browsers. You could change the rule to be "submit" as well as "button" too. This removes the automatic psuedo-padding entirely and allows you to add your own style rules.
I would adjust the padding of the buttons through CSS.
input {
padding: 0; }
Removing the padding will restrict the button size to fit the contents.
Make sure you add this doctype to the top of your page and it won't do that anymore:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
You can read up on what this does here: http://www.w3.org/TR/xhtml1/ but basically it tells the page what sort of HTML you want to use.
This makes the trick:
input[type='button'], input[type='submit'] { overflow: visible; }
/* add above also your desired button padding if you want. */
FYI:
[type='...'] selectors, therefore it's going to ignore this style. For IE6 the only way aroud this is to apply a class to every button and add the same CSS { overflow: visible; } for such class.