solidhex.com

I’ve run into a rather odd Explorer bug of late. The issue has to do with floated or positioned text and line-height. Explorer has many well documented bugs regarding text, positioning and floats, which you can brush up on at PIE. Chances are you are already quite familiar with that list. After some Googling, I still couldn’t find a definitive answer to my problem though, so I’ve decided to document it here.

The bug

When text is floated or positioned in Explorer, the line-height seems to be reduced to the point of the text being cut off. This quirk is most notable when a larger, seriffed typeface is used, but can also be quite noticeable with Arial in particular. Below is a screen shot of what it looks like in IE7 and you can also view the HTML file from whence the screenshot came. Sometimes, this bug goes unnoticed if the cut off portion of the text is very minimal, but if you were to look really closely, you would notice it. In fact, in some cases, I didn’t notice it myself until it was pointed out to me by the all seeing eye of QA4U.

Workarounds

So far, I’ve found three workarounds:

1. Increase the line-height to an arbitrary value until text is fully visible.
2. Wrap text in a floated container.
3. For positioned text, add padding.

While option 1 works, it requires some fudging. Generally, you have to increase the line-height to equal the size of the font. So for example, if the text size is 32 pixels, the line-height should be at least 32 pixels, but you will have to ‘eyeball’ it to get it to look right. The drawback that I’ve found to this method is that the increased line-height can create vertical spacing issues with other layout elements, not to mention you will need to adjust every single header or paragraph that has floated text.

Option 2 works brilliantly and doesn’t require any jiggery-pokery with line-height settings, but the drawback here is that it means an extra div in your markup which might not be desirable to you.

Option 3 has the same potential drawbacks as option 1. You might be able to get away with adding arbitrary padding to the text in some designs, but other designs may be more strict, so it’s clearly not an across the board solution.

In my case, I had dozens of headers floated left and links floated right, so method two won out, which is the solution I provided on the example page. It also had the advantage of me being able to reproduce the design I was coding more closely, which pleased the designer, so the extra divs didn’t cause any premature hair loss.

Conclusion

This is certainly not an exhaustive list of workarounds or fixes, just three quick methods I found of sidestepping the issue. If anyone knows of a fix that does NOT involve altering the structural layer, why the bug is occurring in the first place, or both, I’d love to hear about it. Happy coding!

This entry was posted on Friday, April 4th, 2008 at 3:47 pm and is filed under CSS, Quirks. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.