429802 - characters seem to be cut off at the bottom in combobox (select) with lots of padding and not enough height

Status: NEW

(Core :: Layout: Form Controls, defect)

Description

[Lawrence Newton]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9pre) Gecko/2008041807 Minefield/3.0pre
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9pre) Gecko/2008041807 Minefield/3.0pre

Follow the url and look at the search form on the right side. Characters like "q" "y" "g" "j" are cut off at the bottom. Also the entries in the combobox under the input form shows cut of characters.

Reproducible: Always

Steps to Reproduce:
1. visit url http://www.zweitausendeins.de/profisuche/?q=q%20y%20g%20j
2.
3.
Actual Results:  
cut off characters

Expected Results:  
Show the complete characters like in Fx2 and IE7.

Comment 1

[Lawrence Newton]

Attachment: comparison same site in IE7, FX2 & FX3

Comment 2

[Hasham]

Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9) Gecko/2008061004 Firefox/3.0

Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1a1pre) Gecko/2008062003 Minefield/3.1a1pre

Confirmed. Changing to all OS, Hardware.

Comment 3

[Boris Zbarsky [:bzbarsky]]

Isn't this a duplicate of bug 425004 ?

Comment 4

[Karl Tomlinson (:karlt)]

This bug and bug 425004 are both affected by the top alignment of text, but there are other factors that differ.

Bug 425004 is made worse by the short line-height of some fonts (bug 485335).

In the url here, the height of the text control is specified explicitly, and -moz-box-sizing:border-box from our quirk.css further reduces the available height.

font-size: 12px
height: 18px
border-top-width: 1px
border-bottom-width: 1px
padding-bottom: 1px
padding-top: 2px

So 13px is available for text with em height of 12px.

The centering from bug 481751 improves this considerably, but for available heights close to the em height, as here, using the em ascent/descent instead of max ascent/descent would provide better results.

Comment 6

[Boris Zbarsky [:bzbarsky]]

So what Chrome, at least, does, is it paints overflow into the combobox padding area.  But only vertically, not horizontally.  That's not really doable with CSS, unfortunately.

The problem for us is that the height of the *|*::-moz-display-comboboxcontrol-frame in forms.css is -moz-block-height, and it has overflow: -moz-hidden-unscrollable.  We could _try_ to push the vertical padding from the combobox into the dropmarker and display frame and set it to 0 on the combobox, I guess.  Maybe that would help...