Button Width in IE
2/03/06 : Updated version available here to resolve padding problems when in tables
Ever been annoyed with extra padding in a input button in Internet Explorer? I was and I came up with this solution:
First. The problem child:
Long buttons in Internet Explorer seem to gain extra width. It’s almost as if they calculate the width based on the wrong font size. Padding doesn’t remove it. Margin doesn’t remove it. It just is.
The first try to remove margin and padding does nothing.
[css]
.button{
margin:0;
padding:0;
}
[/css]
The problem is the width; you normaly resolve that with width:auto; but that doesn’t help. If you have the luxury of knowing how large you want the button specifying any other size works… for that size.
[css]
.button{
width:auto;
}
[/css]
One way around this is to set a small size; then allow the browser to increase the size by allowing the text to overflow inside the button. This works perfectly in IE but Firefox ignore’s the overflow.
[css]
.button{
padding:0 .25em 0 .25em;
width:1;
overflow:visible;
}
[/css]
The trick it seems is that IE does the right thing with width:auto; but ONLY when overflow:visible; is set
[css]
.button{
padding:0 .25em 0 .25em;
width:auto;
overflow:visible;
}
[/css]
whew