Friday, June 25, 2010

How to make a fixed padding in HTML buttons?

If you have an input button in your HTML you maybe want to have a fixed padding around its label (text inside button). The padding is normally dependent on the label length and can look inordinate. These two buttons have for instance different spaces between labels and button borders.
<input type="button" value="OK">
<input type="button" value="Cancel">
The same padding is a simple task for most used browsers except Internet Explorer. Use the following workaround for IE:
/* All browsers */
input {
    padding: 0 7px 0 7px;

/* IE only */
* input {
    width: auto;
    overflow: visible;
By the way, the star hack (here * input) is only understood by IE and ignored by other browsers. I've tested this working trick for IE 6-8.

1 comment:

  1. Good Information about input button in your HTML... want to have a fixed padding around its label.. Really worth

    Thanks to Thoughts on software development...


Note: Only a member of this blog may post a comment.