Angry Explorer Extends Italics

If you’ve noticed this blog acting slightly erratic (on second thoughts, nobody would) it is because I have been stung by yet another IE bug. It makes a change; this time it isn’t directly down to CSS, and instead is a bug in the way the rendering engine handles italics.

The problem starts when the browser has to spread the individual characters of italic text over a larger space, as those leaning over will take up more room than their vertical counterparts, similar to kerning. Now that isn’t necessarily a bad thing, but as usual, throw IE into the mix and hair loss is imminent.

The example on the left shows the gap between the photo I took of the Alps and the light grey border; it’s only about 2px or 3px but is intensely annoying. The space Explorer made to compensate for the elongated italics has spilled out right over the margin because of the justified text. Luckily though, there is a remedy that does involve CSS.

Now this bug is apparent over all Explorer versions. Although as of yet, I can only fix this bug under IE 6 and 5.5 – unfortunately not 5.01. Or to put it rather more precise, I can’t fix it under 5.01 without sacrificing the text float functionality. That would be the way the text flows around an image like above.

So tell me already! Well I would be rather amiss if I didn’t credit my source; the excellent Position is Everything collection of CSS hacks. Now the code they suggest is below:

/* */
* html #main {
overflow: hidden;
o\verflow: visible;
width: 100%;
w\idth: auto;
h\eight: 1%;
}
/* */

I’ll explain this line by line. First of all it starts off with a comment hack designed to hide it from all non-Explorer browsers. Next it uses the star selector hack, which is mistakenly parsed by Explorer. In this case HTML is not the child of any element, so shouldn’t be parsed as it has a * in front. The next statement is kinda obsolete in the case of my blog, but I’ll explain it anyway. If you remember I said that the italics spill out, well basically hidden chops off the overhang. If you like 100% positions it up for the chopping. Unfortunately I also found that it upsets the nice way text floats around an image.

So why is it obsolete? Well the majority of the code above is only there because of IE 5. The attribute of visible is enough to correct the problem in 6 and 5.5. After a while it does get tiresome messing around with different attributes and hacks. You have to decide how important the trade off between time and who is going to benefit from it all.

* html #left {
overflow: visible;
}

Is enough for me. If you find your browser makes a little gap between the header picture and the division, get Firefox or Chrome!