Life According to Duck » Blog Archive » Italic Text breaks IE6 Formatting

I came across this bug while working on the layout for Life According To Duck, and thought I would share the solution.

When viewing the page in Internet Explorer 6, my main post <div> was appearing about 4 pixels too wide whenever italic text flowed from one line to the next. The offending text was in a child element, a <p> tag. Briefly stated, IE6 (and I assume IE5) seems to consider the width of the slanted text when computing the box dimension, which of course adds a few pixels to the right side. As a result, the background of the element was appearing wider than the graphical caps above and below it. Sure, it's only 4 pixels, but that's 4 too many by my standards.

I wish I could claim this solution is mine, but it comes from Position Is Everything (who incidentally has a much more detailed breakdown of why this problem occurs).

We need to allow IE to overflow those 4 extra pixels, and even though this should be the default behaviour, we need to specify how the overflow should be handled. Finally, in order for IE to correctly deal with sizing this element, we need to specify *some* dimension. Width really isn't an option, since that's where we're having the issue to begin with, so we'll give the element a bogus height. In the end, we have the following simple CSS solution to the problem:

p {
    height: 1%;
    overflow: visible;
}

As far as I can tell, no * html type hacks are necessary for this solution - it had literally no effect on the appearance of my site in Firefox. I haven't checked Konqueror yet - the power supply fried in my Linux Box at work last week! - but I'm optimistic.

I hope this simple solution to a rather awkward bug saves someone else a little time and headache Enjoy!

Filed Under: CSS
Tags: bug, CSS, ie6, solution
Comment Feed :: Add a Comment :: Trackback