Button Width in IE - Revised
In my previous post on Button Width in IE I proposed a solution to work around the rendering bug in IE which creates extra padding in input buttons.
However, as it turns out, that fix doesn’t work so well when the button is inside a table cell. Here is an image of the problem (table cell in red) and a workaround for that.
My old sution was to use width:auto;and overflow:visible; to get the browser to size things up right. The workaround is to use width:1; by default and feed IE a different value (width:auto;) using a conditional comment. It actually works pretty well.
<style>
td{border:1px solid red;}
.button{margin:0;padding:0 .25em;width:auto;overflow:visible;}
</style>
<!--[if IE]>
<style>.button{width:1;}</style>
<![endif]-->
There is an example page showing the problem, and solutions available.