In case anyone is interested, this is what it looks like on Internet Explorer 5 in Windows 9x: <a href="https://i.imgur.com/g668yBy.png" rel="nofollow">https://i.imgur.com/g668yBy.png</a><p>What's happening is that the <h3> tags are all nested, since they don't auto-close in this situation, and modern browsers define the <h3>'s size as "font-size: 1.17em;" which of course adds up over time. I'm not sure how IE5 interprets the page. Maybe I can get an older embedded version of Firebug to check.<p>I think it's important to not break even older websites even if they have totally busted HTML, but this is probably such a rare case that no one ever thought of it, and at this point it'd probably be much more disruptive to try and "fix" it.
The font-tags are getting unfairly blamed!<p>The increasing size is due to the unclosed <h3> tags combined with unclosed inline level tags. This is parsed into a nested structure, with h3's nested into h3's deeper and deeper. The font-size of h3 is defined as relative increase, so the nested h3-elements get increasingly larger size.<p>The effect can be reproduced with this HTML snippet:<p><pre><code> <h3><span>hello
<h3><span>hello
<h3>hello
</code></pre>
Which is parsed as:<p><pre><code> <h3>
<span>hello
<h3>
<span>hello
<h3>hello</h3>
</span>
</h3>
</span>
</h3>
</code></pre>
Usually a h3 would be automatically closed when a new h3 (or any block-level element) is encountered, but because of the unclosed inline element (span in the above example) it is instead parsed as a nested structure. In OP it is unclosed font-tags which cause the h3's to nest, but it has nothing to do with the semantics of <font> per se, it is just because they are unclosed.<p>So why did it look correct in old IE? I think this comes down to the built-in browser style-sheet. I suspect h3 is defined with an absolute font size in the IE browser style sheet which means nesting does not increase the size.
I'm kinda just pulling this out of the swamp of 25-year-old web design knowledge, but the unclosed code on that page consists of <font> tags, which are long since deprecated, and those font tags have size="2" / size="-2" attributes. I'm pretty sure the old behaviour was that <font size="[signed int]"> affected the size <i>relative to the parent</i> in the same way that CSS "font-size:200%;" or "font-size:50%;" would do. So nesting them doesn't create any new block elements, but it modifies the font size within a <td> or <p> relative to the parent. Just at a look, that seems like the explanation for the increase in font size, in this admittedly odd document.<p>[edit] I believe the page would look <i>as intended</i> if each <font> tag overrode the prior unclosed <font> tag, rather than treating it as a parent, and that was probably how IE 6 interpreted it. In fact I think old browsers would auto-close </font> if you wrote a new <font>.
There is a StackOverflow thread about this page and why it may have looked OK in older browsers: <a href="https://stackoverflow.com/questions/14787255/why-are-unclosed-h3-tags-breaking-this-page" rel="nofollow">https://stackoverflow.com/questions/14787255/why-are-unclose...</a>
I have this page backed up personally on my machine. I love it so dearly, whenever I find myself scrolling through it again I always end up cackling with laughter.
The obvious solution to the web page's problem appears at the bottom of the page:<p>"If a problem persists, we recommend that you contact
Sewing and Embroidery Warehouse"
Past threads:<p><i>This website has a lot of unclosed h3 tags</i> - <a href="https://news.ycombinator.com/item?id=7351838" rel="nofollow">https://news.ycombinator.com/item?id=7351838</a> - March 2014 (132 comments)<p><i>Don't forget to close your HTML tags</i> - <a href="https://news.ycombinator.com/item?id=5194843" rel="nofollow">https://news.ycombinator.com/item?id=5194843</a> - Feb 2013 (11 comments)
I haven't thought about styling tags like `<center>` and `<font>` in quite some time, and I'm glad for it. CSS is quite the wonder and I'll never talk bad about it again after this reminder.
nested H3 tags with:<p><pre><code> h3 {
font-size: 1.17em;
</code></pre>
"(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."<p>So this used to work and look normal.
FWIW this website appears normal in Internet Explorer compatibility mode (i.e. IE7 mode).<p>You'll probably have to jump through hoops to actually get it to open in Windows 10 though...
This is one of the funniest things I have ever seen. I was reading this on my phone in bed last night and couldn't breathe because of how hard I was laughing.<p>It looks like some postmodern piece of art.
There are 1.86 billion websites online right now, many more that used to be online, and over 1.2 million TB data. Probably a lot of it is generic content or machine-generated, but I wonder how many unique, weird sites there are like this.
The title is not correct. It should be Header tags. But then on the other side, I only clicked on your post because I was curious what a font size tag is LOL
If this was a skit, it would be a teacher yelling louder and louder explaining all the things that can go wrong with the machines until a sonic boom destroys the classroom.