Breadcrumb font size MUCH different in FF versus IE

[Phlawm53]

------
For Flare 10 HTML5 Target viewed in either Firefox 32 or Internet Explorer 11.

What CSS trick do I need to use to get both Firefox and Internet Explorer to display an HTML5 Target's breadcrumbs at roughly the same size?

The attached screenshot shows an HTML5 Target's breadcrumb in Firefox 32 and Internet Explorer 11 (both browsers Zoom = 100%):

FFox32VersusIE11BreadcrumbFontSizing.png

The two examples portray the extremes with Google Chrome being smaller but not too small (a.k.a. "perfect")…

The most puzzling part of this is that all the other font sizes in the HTML5 help system are okay — it's only the breadcrumbs that vary wildly between FF and IE.

I've tried searching the Internet for a fix but have only found articles that talk to the side of the issue. Given the wide discrepancy in the size of the breadcrumb font between the two browsers, my hope is that another Flare user will have an "out of the box" answer for this(?)

Cheers & thanks for your help,
Riley
SFO

[NorthEast]

Since 0.5em is a relative size, it'll depend on what font sizes you've set for parent elements; e.g. the body tag.

If you press F12 in IE, and inspect the breadcrumbs, what font-size properties are being set on the parent tags?

Is anything being set in absolute units (px, pt), or is it all in relative units (em, %)?
If everything is set in relative units, then what 1em equals might vary between browsers.

[Phlawm53]

Since 0.5em is a relative size, it'll depend on what font sizes you've set for parent elements; e.g. the body tag.

If you press F12 in IE, and inspect the breadcrumbs, what font-size properties are being set on the parent tags?

Well for a start what I've done is change the font-size spec in the CSS to equal 8pt. That seems to "fix" the problem although it doesn't explain the following (as in, the more I learn the more confused I become).

Per the attached screenshot:

• In the CSS for MadCap|breadcrumbsProxy I had font-size: 0.5em;.
• Firefox 32 believed the font size was 5.4px — yes, pixels — but rendered the breadcrumbs font in a decent size.
• IE 11 believed the font size was 0.5em but rendered the breadcrumbs MUCH smaller than did FF.

BreadcrumbsInspectorViews.png

So while I seem to have circumvented the problem by using a fixed unit of measuremend for the breadcrumbs' font size, I'm mystified as to why Firefox believed the font size should be rendered as a small number of pixels…

Cheers & thanks,
Riley
SFO

[NorthEast]

An em is a relative unit, so setting a font-size of 0.5em is just like saying you want the font to be 50% of it's normal size (1em).

So if you want it to be 50% of its normal size, what are you expecting its normal size to be? (i.e. what is 1em?)

The key point here is determining what that element's normal size (1em) should be and where is that being set; i.e. look at the parent tags to see where the element's normal size is being inherited from. Are you setting a font size on the body tag or any parent tag in the hierarchy?

You might also get into difficulty if you're nesting elements that have em sizes less than 1; e.g. nesting two elements that both have a font size of 0.5em will result in text that's 1/4 of the normal size.

[Phlawm53]

The key point here is determining what that element's normal size (1em) should be and where is that being set; i.e. look at the parent tags to see where the element's normal size is being inherited from.

Yeah, I get that. The initial question was why Firefox and IE interpreted the same relative value so hugely differently.

I can typically fiddle with font sizes in em units and get everything looking right; in online Targets I virtually never use fixed units if I can avoid them. And in fact even in IE the rest of the HTML5 Target's font sizes are properly sized throughout. It was only the breadcrumbs that exhibited a huge difference in sizes. (With Chrome falling in the middle and so being optimal.)

While investigating that issue I was surprised to learn that FF was evidently assigning a value of 5.4 pixels to the breadcrumbs font (per my earlier comment's screenshot of the FF and IE inspectors) but was otherwise displaying it at an appropriate size. So why IE "saw" the breadcrumb font's size in ems but FF saw the same element in pixels is another tangential mystery.

In any event, specifying the breadcrumbs font in points (pt) has circumvented, although not truly fixed, the problem. "Circumvented" because why FF and IE display the breadcrumbs so very differently remains at bottom a mystery…

Cheers & thanks for your help,
Riley
SFO