Bug 13073 – XHTML: CSS width of 100% on <input type="text"> tag renders wider than it should

• Status: RESOLVED
• Resolution: WONTFIX
• Component: CSS

[Michael C. Rael]

Visit http://www.slvdweller.com and notice the "Quicksearch" field in the left-hand column of the main content area (near the top of the white content area). The input field is an <input type="text"> field, and its width goes all the way to the right edge of the column, but it should only go to the edge where the padding begins.

The CSS file styles this xhtml element as follows:

input {width:100%;}

This page is served as application/xhtml+xml, so the XHTML CSS rules would apply. Safari 2.0.4 (419.3) renders the input box properly, as does Opera 9.10.

[Michael C. Rael]

The bug appears on the nightly build dated 2007-03-14.

[Michael C. Rael]

You can see the same results in a much smaller XHTML file:

http://www.slvdweller.com/uploads/input_test.xhtml

[Michael C. Rael]

Even with no external stylesheet:

http://www.slvdweller.com/uploads/input_test2.xhtml

[Dave Hyatt]

This rendering is correct.  In strict mode, WinIE7, Firefox and Safari nightlies all exclude border and padding on the textfield from the width.  (In CSS terms, inputs use box-sizing: content-box in strict mode and box-sizing: border-box in quirks mode.)

[Dave Hyatt]

Safari nightlies now treat the border/padding within Aqua textfields as real CSS border/padding.  You can add box-sizing: border-box if you want to preserve the old behavior.  Similarly in Firefox you can use -moz-box-sizing.