653643 - Firefox ignores min-height & min-width CSS rules for toolbar objects.

Status: RESOLVED DUPLICATE of bug 308801

(Firefox :: Theme, defect)

Description

[KLB]

User-Agent:       Mozilla/5.0 (Windows NT 5.1; rv:2.0) Gecko/20100101 Firefox/4.0
Build Identifier: Mozilla/5.0 (Windows NT 5.1; rv:2.0) Gecko/20100101 Firefox/4.0

While working on updating a theme I maintain for Firefox, I've discovered Firefox has a tendency to ignore min-height and min-width CSS instructions when applied to some objects.

For instance, Firefox has been totally ignoring min-height instructions I've been trying to apply to the classes ".toolbarbutton-1" and ".searchbar-textbox" and instead allowing these objects to collapse down to the stack height of objects they contain.

Reproducible: Always

Steps to Reproduce:
1. Remove all toolbar items from the navbar and put them on the toolbar pallet.
2. Place only the home and stop buttons on the navbar
3. Set the the min-height of the class "toolbarbutton-1" to be larger than the combined height of the contained to toolbar-button-icon height & margin plus toolbarbutton-1 padding.



Actual Results:  
Using DOM Inspector you should observe that the height of the toolbar buttons on the navbar are smaller than the declared min-height.


Expected Results:  
The height of objects that are given min-heights should be equal to or greater than the declared min-height.

At least with toolbarbutton-1 objects if the qualifier "!important" is used on the min-height instruction, the instruction will be obeyed.

I believe I've also observed this behavior with tabs.

This issue becomes a real headache when trying to tweak and tune 3rd party themes and probably adds unnecessary challenges to creating the default Firefox theme.

Comment 1

[(mostly gone) XtC4UaLL [:xtc4uall]]

Can you figure out since what Beta this starts to happen?

Comment 2

[KLB]

I've been working in FF4.0, but I know I was having problems with min-height and tabs back during the final FF4 release candidates when I started updating my theme for FF4. I recall all kinds of trouble with toolbar item heights back in FF3, but I didn't make as much of an effort to figure out what was going on.

I had been noticing the toolbar height in my theme jumping around as different items were added and removed from toolbars and wanted to figure out what is going on so that I could lock down toolbar heights regardless of toolbar configuration. This is when I discovered the problem with min-height being ignored for some objects but not others.

I've been trying to figure out if there were other style rules mucking with the box model that would override min-height rules or change calculations. For the life of me I can't find anything to justify this behavior.

I'd love to find that there is just a style rule that is changing or overriding the min-height rules, but have come to suspect it is a bug.

Comment 3

[KLB]

I think I've figured out what is going on and it appears to be a bug in DOM Inspector not Firefox. DOM inspector is calculating heights excluding the borders, but the "-moz-box-sizing:border-box" definition set by chrome://global/content/xul.css includes borders in height calculations.

This means that assuming sub-nodes are small enough and I'm using 1px thick borders, if I want .toolbaritem-1 to show a height of 18px in DOM Inspector I need to set min-height to be 20px. This is a totally wrong and confusing behavior. DOM Inspector needs to calculate heights the same way Firefox is based on the "-moz-box-sizing" rule being applied.

Now I just need someone to help confirm this is a bug in DOM Inspector calculations and then document it in the proper place so it can be fixed.

Comment 4

[KLB]

"-moz-box-sizing:border-box" does appear to be the root cause of my problems. According to bug 308801, "-moz-box-sizing:border-box" causes Firefox to ignore min-height and max-height instructions. I forced my theme to use "content-box" instead of "border-box" for all objects by inserting the rule "*{-moz-box-sizing:content-box;}" into my global.css file and min-height started working better. 

Using "content-box" has its own issues that have to be considered but at least min-height is usable.

As "-moz-box-sizing:border-box" breaks min-height, min-width, max-height & max-width, as well as the fact that "content-box" is the default style as specified by CSS specifications, chrome://global/content/xul.css at line 13 should really be using "content-box" not "border-box" as it would allow object measurements to behave according W3C CSS specifications.

References:
https://developer.mozilla.org/en/CSS/box-sizing
https://bugzilla.mozilla.org/show_bug.cgi?id=308801

Comment 5

[Jorge Villalobos [:jorgev] (he/him)]

Moving this to the Theme component. The bug causing this is bug 308801 as mentioned above, and I think this bug would be about changing the theme to avoid this bug as much as possible, given that it doesn't like it'll be resolved anytime soon.

Comment 6

[Matthew N. [:MattN]]

Since bug 308801 is fixed, can this be duped there now?

Comment 7

[Jorge Villalobos [:jorgev] (he/him)]

I suppose so.