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!
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: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model
I edited your jsFiddle to show it working: jsFiddle demo