503458 - submit input with set height and matching line-height doesn't vertically center text

Status: NEW

(Core :: Layout: Form Controls, defect)

Description

[daniel]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-GB; rv:1.9.1) Gecko/20090624 Firefox/3.5
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-GB; rv:1.9.1) Gecko/20090624 Firefox/3.5

Submit input with set font-size and set height and matching line-height doesn't vertically center text.

The text is anchored to the bottom of the button box. This is in both Firefox 3 and 3.5. It's not an issue in Firefox 2. 

It works as expected in IE 6, IE7, IE8, Safari Win 4, Chrome 2, Opera 9.

Reproducible: Always

Steps to Reproduce:
input {border:0; width:100px; height:22px; line-height:22px; font-size:10px; }

sizes chosen make it obvious - they are not necessary. setting font-size apparently
border:0 is to force it from system controls.
Actual Results:  
The text is anchored to the bottom of the button box. This is in both Firefox 3 and 3.5. It's not an issue in Firefox 2. 

Expected Results:  
The text is vertically centered in the button box

It works as expected in IE 6, IE7, IE8, Safari Win 4, Chrome 2, Opera 9.

This issue is in firefox 3 and 3.5. 
It's not an issue in Firefox 2.

Comment 1

[Boris Zbarsky [:bzbarsky]]

Hmm.  The text is centered if you don't override the line-height, though?

It might make sense to just stick line-height: normal on the anonymous block in there; I bet we're centering the block in the button, but the block is made as tall as the button by the line-height styling.

Karl, thoughts?  You've been poking at line-height stuff recently...

Comment 2

[Boris Zbarsky [:bzbarsky]]

That said, I don't see the issue with either Firefox 3.5, Firefox 3, or trunk builds on Mac.  The rendering is certainly centered.  It's not quite as obvious with the 22px height, but with a 100px height and line-height it's very clear.  Reporter, do you see this in safe mode?  Do you have any user stylesheets?

Comment 3

[Karl Tomlinson (:karlt)]

This would happen if View -> Zoom -> Zoom Text Only is set.

Comment 4

[Rob Moss]

I'm seeing this as well. Changing "line-height: normal !important;" to "line-height: normal;" in forms.css and leaving the example as-is fixes this example for me, in the same way it does for the example I posted on bug 349259. Firebug tells me that the computed line-height for the input button is 13px. If I change the value attribute to "Sg" (to get the full 10px range of the font from top to bottom) there's 3px below the text and 9px above it.

Furthermore, if I disable the line-height rule, or if I change line-height to normal, the text remains closer to the bottom of the box than it does to the top - the rule just gets completely ignored because forms.css overrides it, as per the CSS spec an !important rule in a user agent stylesheet cannot be overridden.

Does "line-height: normal" get calculated differently by FF3/3.5 on Windows and OS X? I've been messing around with some different browsers we've got logins for at work to test sites with; using the original example (value="Search", as I can't use them to test local files) I've got the following gaps above and below the text:

Internet Explorer 6.0 - Windows XP: 8, 7
Internet Explorer 7.0 - Windows XP: 8, 7
Internet Explorer 8.0 - Windows XP: 8, 7

Firefox 2.0 - OS X: 7, 7
Firefox 2.0 - Windows XP: 7, 7

Firefox 3.0 - OS X: 7, 7
Firefox 3.0 - Windows XP: 9, 5

Firefox 3.5 - OS X: 7, 7
Firefox 3.5 - Windows XP: 9, 5

IE's text is 1 pixel smaller, for some reason.

With regards the 100px height/line-height example Boris mentioned - if you have "height: 100px; line-height: 65537px;", "height: 100px; line-height: 0px;" or "height: 100px; line-height: -65537px;" you get exactly the same results in FF3/3.5 - it doesn't observe the line-height rule at all.

It's more obviously demonstrated by examples where font-size == height == line-height, especially at small sizes (as text actually gets chopped in half).

So it seems that current behaviour is for the containing box to be drawn, the line-height of the text to be calculated according to whatever algorithm "normal" follows, and then for it to be anchored either to the centre of the box on OS X, or the bottom of the box on Windows.

Comment 5

[Karl Tomlinson (:karlt)]

Attachment: snapshot of attachment 440225 on Linux

The snapshot in attachment 440233 [details] is similar (on XP I assume).

Comment 6

[pjkix]

seems to be related to https://bugzilla.mozilla.org/show_bug.cgi?id=349259