Bug 13073
| Summary: | XHTML: CSS width of 100% on <input type="text"> tag renders wider than it should | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Michael C. Rael <rael> |
| Component: | CSS | Assignee: | Nobody <webkit-unassigned> |
| Status: | RESOLVED WONTFIX | ||
| Severity: | Major | CC: | mitz |
| Priority: | P2 | ||
| Version: | 420+ | ||
| Hardware: | Mac (PowerPC) | ||
| OS: | OS X 10.4 | ||
| URL: | http://www.slvdweller.com | ||
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.
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
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.