CSS: Submit button looks smaller than text input and textarea

Question

I just noticed this strange rendering of a very simple form.

Here's my markup/CSS: http://jsfiddle.net/a9PLM/

As you can see, text fields and the button share the same styles but their size is quite different.

Why does this happen?

Thanks!

Answer 1

This is because of the box model being used is different for the <input type="submit"> and the <input type="text">/<textarea>. You can make the box models the same by specifying them with CSS:

box-sizing: border-box;
-moz-box-sizing: border-box;

You can read more about box models here: http://www.quirksmode.org/css/box.html

I edited your jsFiddle to show it working: jsFiddle demo

Answer 2

I think this is a browser rendering issue... with buttons being displayed differently than text inputs.

To fix, add this to your css

form input[type="submit"]{
    width:273px;
}

Example: http://jsfiddle.net/jasongennaro/a9PLM/1/