bioneural.net

Since I began revamping my site (mostly under-the-hood) at Xmas I've tracked down and eliminated a number of long-standing bugs. I'm now satisfied that my site renders acceptably using Firefox, Safari, IE6 and 7, and across both my primary and alternate styles. Thankfully the majority of bugs I've encountered have been well described and have had solutions documented. But it's matching your issue to the bug description that's the hard part. One particular IE6 bug took me a while to identify because it seemed so random: some pages were inexplicably wider than the fixed-width of 780px by 3px.

The problem

Because my header image is exactly the width of my page container, the effect of the expanded container was readily visible in IE6:

Playing detective

Starting with an afflicted page I deleted content first from the sidebar, and then from the main content area, adding it back one chunk at a time to see which element was responsible for causing the anomaly. By so doing I narrowed it down to one particular text-only paragraph. The mark-up was perfectly valid and contained no floats, padding, or borders that IE6 loves to choke on.

Firefox's Web Developer Extension has a topographic overlay which is extremely valuable for checking element widths (especially when combined with the new Dimensions "laser" in the indispensable xScope, now at v2.0). That looked fine, but the breakthrough came when I tried outlining divs in Internet Explorer 7 with the Developer Toolbar. I noticed that italics rendered outside the div outline:

Sure enough, now I knew what to look for I could see this in both Safari (left) and IE6 (right):

I temporarily removed the italics from my troublesome paragraph, and the problem went away.

The solution

It turned out that changing width to accomodate italics in a block of specified width was a known IE6 bug: just not one I'd encountered before. The fix was simple. Since I was already using conditional comments to feed bug fixes to IE6 I just needed to add one line to my IE6-specific stylesheet:

#primary { overflow: visible; }

As noted by PIE, it makes no sense at all since "visible" is the default value of overflow anyway. But you can't expect logical behaviour from IE6 can you?

Actions Send this article link by e-mail Print this article without other content Follow responses to this article: comments Follow tag feeds: css, Internet, webdev. Share on Delicious Digg Facebook StumbleUpon Twitter Translate this page: DE | ES | FR