Home > Treasure Chest > Too much padding on buttons in Internet Explorer

CSS: Too much padding on buttons in Internet Explorer

Problem

Internet Explorer 6 and 7 render input buttons with too much padding on the left and right or render the input button's border too wide if the button's text is very long.

The input buttons of this form have too much padding on either side.

These input buttons display now as intended.

Solution

Restyle the input buttons using CSS as follows:

form input {overflow:visible;font-size:1.1em;padding:2px}

This fixes the button width problem in IE nicely and does not affect other browsers.

Discussion

The important part is the first rule. It seems to force IE to expand the button to accomodate for the correct width. You can apply any font size and padding that you need.

Tip: Since this fix is for Internet Explorer only, put it into a separate style sheet to keep your valid code clean.