IE workaround - Losing unwanted padding within Input buttons in IE 6 (and perhaps IE7) using CSS

PROBLEM - IE adds over-generous padding to left and right of an input type="submit" button - and this gets to be a real problem at larger font sizes. The padding cannot be removed by adjusting padding or margin settings, but there is a way ...

(Note - the same problem doesn't apply if you use the specific "button" tag - but then IE adds new misery there by not allowing you to identify which of several submit buttons have been pressed!)

SOLUTION

FIRST, Set a CSS class for the button and specify this with "overflow: visible".

This loses all padding around the text so:

NEXT, restore sensible padding within this same CSS class - say 5px left and right.

The button now looks fine, but any containing table cell will be grossly too wide - it will be set to the same width as if the extra padding within the button was present, PLUS the extra padding you have added. So:

LASTLY, create a DIV around the "input" tag, and give this a CSS class which specifies:

• overflow: hidden
• width: (exactly the same as the table cell width you want)
  

Result - narrower buttons in IE, with no impact on Firefox or Opera (FF1.5 and Opera 9.21 anyway).

I've not managed to reproduce this within the constraints of Blogger's formatting, so you'll need to follow this link to see it in action.