Inconsistent Handling of Input Element Dimensions

RESOLVED INVALID

Status

()

Core
Layout: Form Controls
RESOLVED INVALID
13 years ago
13 years ago

People

(Reporter: Robert F., Unassigned)

Tracking

Trunk
x86
Windows XP
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(URL)

Attachments

(2 attachments)

(Reporter)

Description

13 years ago
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.

Updated

13 years ago
Assignee: firefox → nobody
Component: General → Layout: Form Controls
Product: Firefox → Core
QA Contact: firefox.general → core.layout.form-controls
Version: unspecified → Trunk

Comment 1

13 years ago
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.

Comment 2

13 years ago
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.

Updated

13 years ago
Status: UNCONFIRMED → NEW
Ever confirmed: true
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.