How I wish IE6 would go the way of movable type

By no means am I a CSS ninja, I’m not even a CSS guru, but what I am is a guy with a few years under my belt spent designing, developing and analyzing web sites. While working at Concordia University, I’ve had the… “privilege” of seeing a wide variety (X)HTML and CSS bugs. Here’s one bug that stole a day’s worth of work from me that I wanted to share:

In Internet Explorer 6, if the font-size of the body is set to 1em, the Text Size feature (shown below) when set to sizes other than medium, makes the fonts laughably out of proportion. If you are also having this problem…

How to set the Text Size in IE6

Good news: IE6 is on the decline and its use, at least according to Concordia’s web statistics, appears to finally be on the verge of dropping below 15%. If you wait long enough, you can ignore this bug altogether!

Bad news: at least 15% still use it, and if you’re like me, 15% is still a sizable amount of traffic to disappoint, so, the plan of just telling people to use Firefox or Safari is pretty much out the window.

So you don’t have to waste a day of your life debugging, I dug up solutions from Fierce Street Networks and The Montoya Herald.

Typically the root cause for this strange behaviour in IE6 is a body style set somewhere in the CSS like this:

body{
     font-size:1em;
}

All you have to do is declare the base font-size as follows:

body{
     font-size:100.01%;
}

That’s it that’s all.

The only things to remember are:

• Avoid setting the percentage lower than 100.01% (for cross-browser considerations, you can blame Opera for its odd rendering of fonts).
• No matter what percentage you set, tack on the 0.01% at the end (to not markedly alter the desired font-size, namely in Safari).

So for example, 110.01% is fine, 99.01% is not. Personally, I suggest you stick to the 100.01% setting. I’ve used sizes other than 100.01% with success, but your results may vary. As for the rest of the font-sizes on the page, feel free to use em or percentages, whichever you prefer. From my experience, neither one breaks this fix.

If you have a better solution for this IE6 oddity, do let me know.