additions...

...web design...

em font-resizing bug in IE5 ‑ IE7

We've all heard about this bug, but it keeps popping up in new web pages...

Internet Explorer for windows has many bugs – no surprise there. However, some of them are more annoying than others for the end-user. The “extreme font-resizing bug” or “em font-resizing bug” is one of them.

This is one of the easiest IE-bugs to counteract, but web developers tend to forget about it since they themselves tend not to use Internet Explorer in their design-process. It is indeed an IE-bug that's easy to forget when one uses Firefox, Opera or Safari daily, and only occasionally take a quick look at ones own work in Internet Exploder, as that old browser is known as amongst web developers.

case study…

Web developers often ask their peers on various discussion-lists to take a look at web designs around the time of release, just to make sure they haven't overlooked some minor detail. Always good to have another pair of eyes and a second opinion on ones work.

So this “extreme font-resizing bug” appeared in an otherwise well-prepared site ready for launch. A few comments back and forth, and the bug was taken care of.

The site in question: Clearleft Web Design, is of course in perfect order now, and has moved on. That's the whole idea behind successful bug-fixing.

Since my comment was the revealing one about this annoying bug, I asked and got permission from the site-owner to use my screenshots from that case as examples on what a site may look like when this “extreme font-resizing bug” is bugging it.

That site now has another font-size bug – triggered by a well known human one. This bug can also be a bit annoying, but now in a number of well known non-IE browsers under certain conditions. Clearly they haven't tested their creation well enough across browser-land– yet. I leave it to you to figure out which bug it is. It won't crash your browser.

the bug & fix…

the cause...

Simply setting font-size in 'em' as base will trigger this ridiculous bug.

body {font-size: 1em;}

...and Internet Exploder is out of control.

Note: Font-size base can be any element, since it just has to be the first element in the source-code with font-size defined on it. Nested elements will inherit this IE-bug, regardless of where it is triggered.

the fix...

Fixing it is easy. Just set the base in percent. That can be done like this:

body {font-size: 100%;}

...or like this:

html {font-size: 100%;}
body {font-size: 1em;}

We are of course free to use any value as base, but small values as base won't do our font-sizing reliable. However, that's another story.

re-triggering the bug…

Note that this IE-bug can be re-triggered if font-size keywords are used anywhere in a document. The bug is then inherited by the children of the element in question, and IE is on it again.

So, you've been warned. Unless you intentionally want to trigger the “extreme font-resizing bug”, don't mix in font-size keywords.

many buggy sites…

Maybe it can be seen as a clear sign of changing preferences amongst web developers, but we can find quite a few sites around that trigger this “extreme font-resizing bug”. Some high profile sites there too.

It is easy to see if a site triggers this IE bug – use IE/win and change font-size to largest. If the text blows completely out of proportion and/or the layout shows severe signs of breaking, then it has probably triggered the bug.

Note that this IE bug inherits down the chain. Thus some sites with basic styles are less affected, while others with more complex font-size nesting may blow completely apart. See below.

extremely buggy sites, when last visited:

I hope this list stays short, as it is completely unnecessary to let this bug ruin good sites. It should be fixed, ASAP.

I don't use Internet Exploder much for regular surfing myself, which may be the reason for a short list. There are sure to be plenty more buggy sites around.

What bewilders me, is that the sites above claim to master web design to a high degree. Doesn't look like they master ordinary browsers all that well though, and I think that's a major weakness for any web designer.

affected to a lesser degree:

Maybe these are intentionally using this bug. Yes, I am serious about this, as it may actually improve on IE/win's limited font-resizing range when done right. However, the degree of success is questionable even if that's the case.

Whatever the reasons for leaving this bug unfixed, it is most often not much of a problem. It just makes such sites break under certain circumstances in the most used browser at present time. Did I mention that I don't often use that browser for surfing?

conclusion…

There's no question about it: this is a genuine Internet Exploder bug, so it's not the web developer's fault if a site breaks, really. No need to blame web developers for not seeing it either, as they normally use their more capable browsers for testing and surfing.

However, as this is such a simple bug to counteract, and I'm a bit tired of pointing to it on various discussion-lists and forums, the bug and fix is hereby documented on my site – ready for linking. Time to move on.

sincerely  georg; sign

Hageland 20.nov.2005
last rev: 26.mar.2007


additions...

extreme:
not reasonable: going far beyond what is reasonable, moderate, or normal
— msn Encarta

bug examples:

Click image-links to see the complete screenshots for each of Internet Exploder's buggy font-steps.

smallest:

Ridiculously small fonts. No use trying to read anything here.

smaller:

This isn't much better. I am not able to read this one.

normal:

Normal font-size is perfectly normal. That's the main reason why this bug is so often overlooked.

larger:

Most visitors would find this pretty readable – on a few meters distance from their screen.

largest:

Readable from the other end of the barn, but the page looks completely broken.

intentional:
deliberate: done on purpose, not by accident — msn Encarta

ridiculous:
unreasonable: completely unreasonable and not at all sensible or acceptable — msn Encarta

ridiculous:
completely silly: silly and amusing — msn Encarta

I am glad Microsoft know how to describe their own software — Georg



about…
…2005 - 2007