CODEWITHSUNDEEP
htmlcsswidthquirks-mode
Shawn Taylor
Shawn Taylor

Reputation: 3969

Why width is set different on input elements

I am banging my head for quite a long time and don't what's going wrong with setting width of input elements.

Here 100px set width for submit button
Here same 100px is set to text field

And you can check the difference of width. It seems one is following quirks mode BUT WHY when same doctype is set?

Is it a bug in FX/Chrome?

Upvotes: 2

Views: 124

Answers (3)

wizztjh
wizztjh

Reputation: 7041

by adding a box-sizing:border-box to input text will solve it.

because the default calculate width and height without the border included , by adding box-sizing:border-box The sum of width and height properties include the padding and border, but not the margin will be 100px

http://jsfiddle.net/wizztjh/gn3Cw/6/

more information of box-sizing

Upvotes: 2

Scott
Scott

Reputation: 21882

Text fields have built in borders. Look what happens when you remove borders : Fiddle here

Upvotes: 1

Chamika Sandamal
Chamika Sandamal

Reputation: 24312

it is because of the border size try this,

http://jsfiddle.net/gn3Cw/2/

http://jsfiddle.net/gn3Cw/3/

Upvotes: 2

Related Questions