Firefox/Safari setting height as [specified height - padding - border] for input[type=button]

Question

When I use the following CSS:

input[type=button] {
  background-color: white;
  border: 1px solid black;
  font-size: 15px;
  height: 20px;
  padding: 7px;
}

with this HTML:

<input type="button" value="Foo" />

I expect to see this, so the total height becomes 36px:

1px  border
7px  padding
20px content (with 15px text)
7px  padding
1px  border

But instead both Firefox 3.6 and Safari 4 show this: (Haven't tested in other browsers)

1px border
7px padding
4px content (with 15px text) => height - 2 * border - 2 * padding
7px padding
1px border

Does anyone have any idea why this happens?

(Even if it's expected behavior, what's the logic behind it?)

Answer 1

A few things you can try:

• Set the doctype of the document ()
• Set the input to be display:block or display: inline-block
• Use a reset stylesheet.

Answer 2

Form elements have traditionally had a width/height that includes their padding/border, because they were originally implemented by browsers as OS-native UI widgets, where CSS had no influence over the decorations.

To reproduce this behaviour, Firefox and others render some form fields (select, button/input-type-button) with the CSS3 box-sizing style set to border-box, so that the width property reflects the entire rendered area width including the border and padding.

You can disable this behaviour with:

select, button {
    box-sizing: content-box;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
}

(or, which is more common for liquid form layouts where you want to use ‘100%’ width, you can set the others to border-box.)

The -browser prefixed versions have to be there to catch browsers that implemented this before the standardisation process got so far. This will be ineffective on IE6-7, though.

Answer 3

It makes sense because the height of the element is naturally more than what you set it to. input elements are assigned a height which, in this case, should be enough to contain the text of your element but you set it to a smaller amount. To show this, remove your height setting.

Answer 4

I got it working removing the padding of the input button and setting a height around 20. then adjusting the height, padding of the anchor element. I Also set the line-height, font-size and the font-family.

worked on FF,IE,safari and chrome :D