Setting percentage font in select and option causes size mismatch in dropdowns




Layout: Form Controls
15 years ago
15 years ago


(Reporter: Felix Miata, Unassigned)



Firefox Tracking Flags

(Not tracked)




(1 attachment)



15 years ago
2003030912 OS/2 trunk (not new)

To reproduce:
1-in userContent.css set 'option, select { font-family: helv !important;
font-weight: normal !important; font-size: [Xem or X%] !important; }'
2-open Mozilla
3-open a show_bug.cgi page

Actual results:
1-option selected is 1pt larger than the other options
2-option selected box height is set 1pt shorter than necessary to fit the text

Expected results:
1-option selected is same size as the other options
2-option selected text fits within its box

With the default font WarpSans for option & select, there is only one size, so
you don't see the problem.
If you set the font size in pt instead of em or %, the sizes of option selected
and other options match (no problem).
I looked in res/forms.css and couldn't spot anything responsible for this.

Screenshot to follow.

Comment 1

15 years ago
Created attachment 116754 [details]
1024x768 screenshot

Comment 2

15 years ago
Recreate was incomplete. Add to user.js:

     user_pref("font.size.variable.x-western", 17);

Bug 187093 explains why I set font size this way and why I set default to 17px.

Comment 3

15 years ago
What does this mean?

[Xem or X%]

What value are you using?

Incidentally, with the new platform-forms.css code, 
WarpSans is no longer the default for dropdowns.


Comment 4

15 years ago
X, the universal variable. [A or B] means pick one (an em value or a % value). I
think the screenshot was made using 90%, or .85em or thereabouts. Rather than
typing [.85em or 90%], I gave you a choice to not use px and not use pt but to
select your own size.

My object was to make Helv small enough to not bold in either select or option.
I'm currently using 8pt, since 9pt gets you 10pt, which is bold.

When I deleted userContent.css to see what the defaults were I noticed how big
things were compared to not so long ago. Didn't notice platform-forms.css until
your bugmail.

Indirectly the object of the exercise was to try to keep the scrollbar on the CC
list from virtually always being off the bug page screen. 8pt select/option
seems to have done the trick, with a little assist from .92em input and textarea.

Comment 5

15 years ago
Actually, this bug has only to do with setting percentage on option and select
simultaneously, and it is cross platform.

I have put up a testcase at:

Incidentally, for the behavior you want, just set the font for option (not
select) and it will work like you think.
Assignee: other → font
Component: Layout → Layout: Fonts and Text
OS: OS/2 → All
Hardware: PC → All
Summary: option, select mismatch when not WarpSans or sized in pt (bitmapped font) → Setting percentage font in select and option causes size mismatch in dropdowns


15 years ago
Priority: -- → P4
Target Milestone: --- → Future

Comment 6

15 years ago
Per discussion with Hixie, this is working as designed.

mkaply: per css2, behaviour of css on form elements is undefined. Per what I
would like us to do, the options in the list should end up with a font of 2.25em
the select's parnet, and the text in the box at the top (the selected option
bit) would be at 1.5em the select's parent.

So you would expect that this would happen.

The solution is to just set select in CSS, don't set option.

Last Resolved: 15 years ago
Resolution: --- → INVALID

Comment 7

15 years ago
I've been using the following since filing this bug: 

option, select {font-family: helv !important; font-weight: normal !important;
font-size: 8pt !important; line-height: normal !important;}  /* picklists */

It works beautifully using 120 DPI.

Parnet (parent)? 2.25em? 1.5em? Most of comment 6 is clear as mud. Why would you
want humongous select lists? Why should list elements not be the same size as
the selected? If the official Mozilla position is to make selected larger, would
the better override simply be to use inherit?

Why is this invalid?

Comment 8

15 years ago
Essentially what setting font on select and option does is set the font on
option to 150% and then when you set it on option, it inherits the select font
and then sets that to 150%.

So you get 150% for the first dropdown and 225% for everything else (which is

You've said "Make selects 150% and then make the options in them 150% of that"

Comment 9

15 years ago
In comment 6 was said:

"I would like us to do, the options in the list should end up with a font of
2.25em the select's parnet, and the text in the box at the top (the selected
optionbit) would be at 1.5em the select's parent."

I understand how inheritance works. What I don't understand is a desire for
default Mozilla behavior for these large sizes as default behavior. Is this mere
hypothetical for select<->option inheritance illustration?

Your comment 5 testcase didn't specify I was supposed to have no userContent.css
rules to override option and select, so it provided no clue that option
inherited from select, which only became apparent in comment 8. The fact that
select inherits from option is what makes the bug invalid. -> v
Component: Layout: Fonts and Text → Layout: Form Controls
You need to log in before you can comment on or make changes to this bug.