"(historically the em unit was derived from the width of a capital "M" in a given typeface.). The numeric value acts as a multiplier of the font-size property of the element on which it is used."
Another dilemma for website archival, then. It'd be cool the Internet Archive came up with some JS shim to render websites how they were supposed to look.
(Enough so that if I find a website with JS required, I'll usually defer first to opening it in Archive.is, though of late the endless CAPTCHAs are somewhat chilling the enthusiasm of that.)
I've started opening Bloomberg articles in archive.is since they started not serving the article content. (And, presumably, loading it later through javascript?)
That is not correct. The em unit has always behaved with respect to the inherited font size. If your body has font-size: 16px; then a child with font-size: 1.5em; would appear the same as using 24px for the value. This can recur with nesting, so that 24 could become 36 with another layer added. The rem (root em) unit solves this “problem” as it’s always relative to the document root (usually the font-size you’ve set to html/body)
em was always compounding, but this website used to work in IE because it was generated by Frontpage. Microsoft made tools generating non valid HTML so they would break in Netscape.
But... they aren't nested. HTML doesn't allow interleaved tags.
Here's a snippet of relevant page source:
<tr><td><h3><font color="red"><font face="arial">Improper Thread <br><width="25%" align="left"></font><font color="#0033FF"><font face="arial"> Try re-threading the machine; make sure the thread goes through all guides.</font></td></tr>
<tr><td><h3><font color="red"><font face="arial">Burrs <br><width="25%" align="left"></font><font color="0033FF"><font face="arial">There may be burrs in the needle's eye, on the thread guides, needle plate or the hook. Replace the needle and try buffing the thread guides and needle plate. Buffing may alter the timing, so it's a good idea to replace a damaged hook.</font></td></tr>
The <h3> tags are not matched by explicit </h3> tags. But they are closed; it isn't possible for the <h3> tag to extend beyond the boundaries of the <td></td> tag that contains it.
(Granted, there is no <table> containing these <tr> and <td> elements...)
> font-size: 1.17em;
Where is this applied? I'm looking in the page source and there are only six instances of `font-size`, none of which match this. There's one `<style>`, which doesn't have a font-size and doesn't style h3 tags. The string "1.17" does not appear in the source. The page inspector shows no styling applied to h3 elements.
They are nested in a physical sense, its simply not valid html. Im sure it was purely coincidental IE had a special mode to fix broken HTML on the fly, and one of the most popular beginner friendly web authoring tools generated strictly broken html
> They are nested in a physical sense, its simply not valid html.
For this to be true, you'd need containment to be a nontransitive relationship. In the sense in which h3 #2 is contained within h3 #1, all of the following hold:
So this used to work and look normal.