Question

I have a text input with a set height and padding however the padding is not taking effect. And it gets even weirder. I created a js fiddle (linked below) and in the js fiddle it works fine however if I make a test page and open it directly in my browser (chrome on a mac) it disregards the padding. Please help I’ve tried everything I could think.

BTW. I’m testing this on chrome for mac
http://jsfiddle.net/Jebg3/

UPDATE

I’ve linked to a file where the issue is clear.

http://levihoch.com/tests/input.html

UPDATE 2

@truth suggested using the box-sizing property and it works perfectly in opera however it breaks in every version of IE. The updated page is here:
http://levihoch.com/tests/input.html?v=2

Answer 1

Add the following property to your list of rules:

box-sizing: content-box;

For some reason Chrome applies “border-box” to it, which causes your height: 13px; to be calculated from the border, and not from the content.

Here’s a great article on the subject, by Chris Coyer @ CSS-Tricks