Bug 13073 - XHTML: CSS width of 100% on <input type="text"> tag renders wider than it should
Summary: XHTML: CSS width of 100% on <input type="text"> tag renders wider than it should
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 420+
Hardware: Macintosh PowerPC OS X 10.4
: P2 Major
Assignee: Nobody
URL: http://www.slvdweller.com
Depends on:
Reported: 2007-03-14 12:17 PDT by Michael C. Rael
Modified: 2007-03-14 17:40 PDT (History)
1 user (show)

See Also:


Note You need to log in before you can comment on or make changes to this bug.
Description Michael C. Rael 2007-03-14 12:17:57 PDT
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.
Comment 1 Michael C. Rael 2007-03-14 12:18:40 PDT
The bug appears on the nightly build dated 2007-03-14.
Comment 2 Michael C. Rael 2007-03-14 17:21:36 PDT
You can see the same results in a much smaller XHTML file:

Comment 3 Michael C. Rael 2007-03-14 17:38:05 PDT
Even with no external stylesheet:

Comment 4 Dave Hyatt 2007-03-14 17:38:40 PDT
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.)
Comment 5 Dave Hyatt 2007-03-14 17:40:45 PDT
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.