User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0 Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0 With Mozilla Firefox 1.0, it has come to my attention that the height and width of button elements are not rendered the same as other elements. Apparently, buttons are not following the same box model as other elements, because when placing these elements next to each other, one can planely see that they are off. When it comes to many pixel perfect designs, or simply laying things out, this is an issue, and not per the W3C Specifications. Reproducible: Always Steps to Reproduce: 1.Create a Form 2.Insert two input elements - A text input and submit button input type 3.Use CSS to give both the same border, padding, margin, width/height 4.View Actual Results: Buttons of all types come up a few pixels short of what they should. Expected Results: All buttons should be of the specified width/height, the same as the text elements.
Assignee: firefox → nobody
Component: General → Layout: Form Controls
Product: Firefox → Core
QA Contact: firefox.general → core.layout.form-controls
Version: unspecified → Trunk
Created attachment 169584 [details] input & button with border The main issue appears to be that for input controls the border is added outside the specified width, but for buttons it is added inside as shown by the attachment. I.E. does the same. http://www.w3.org/TR/2004/CR-css3-ui-20040511/#box-sizing0 may address this.
Created attachment 169585 [details] Very high input and button aligned by text Another issue is that the controls are arranged so the the text inside is aligned horizontally so the boxes may go out of line as in the exagerated example. http://www.w3.org/TR/REC-CSS2/visuren.html#inline-formatting mentions this sort of thing. I.E. does it differently. These look like features rather than bugs.
Comment 1 is correct. We're using a different box model (-moz-box-sizing: border-box), because the exact rendering of buttons is undefined per CSS and this gives us compat with other browsers. So the behavior is as-designed.
Status: NEW → RESOLVED
Last Resolved: 13 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.