CODEWITHSUNDEEP
css
Mr. Smee
Mr. Smee

Reputation: 960

Why Doesn't This text input abide by the styles I set to it

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

Upvotes: 0

Views: 65

Answers (2)

Madara's Ghost
Madara's Ghost

Reputation: 174977

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

Upvotes: 1

FarligOpptreden
FarligOpptreden

Reputation: 5043

Well, based on the sample you posted, the <style> tag is in the incorrect place. Try placing it in the <head> tag of the document...

Upvotes: 0

Related Questions