Thursday, September 29, 2005

Bug: Internet Explorer standards mode and element scrollbars

I've run into a problem with my ActiveMenu script. When IE6 is running in standards mode (vs quirks mode) the width calculation of a box gets a bit screwed up because IE6 doesn't take into account scrollbars while calculating the width of an object. This means that objects with a defined height and overflow: auto or overflow: scroll will end up wider than either a calculated or assigned width. The width discrepency is a problem because the presence of scrollbars modifies the working width of a box, which affects the layout of the box.

While I was able to find a few mentions of this problem, no real information seems to be available. Certainly no indication of a fix through either styles or scripting. See:
Unfortunately none of the big guys out there seem to have documented this problem. I may post a bug report on QuirksMode.

How this afffects Active Menu
If no width is specified for the story box then the area next to the floated headline list is calculated and used. Regardless of whether the width is specified or calculated, if scrollbars are added the story box is widened and no longer fits in the area next to the float. As a result the story box gets pushed below the float.

I worked around the problem by modifying the width of the story box when the document.compatMode property indicated that the page was being rendered in standards mode (via PPK) in IE6. One drawback of this approach is that the width is no longer flexible in IE6, though I could maybe add a function to correct it onresize of the parent div. I should maybe also consider disabling this check if the user has set the width of the story box in via CSS, under the assumption that they have taken the scrollbar problem into consideration.

I haven't tested in other versions of IE.

I'm not sure if this is also a problem with height calculations, though that would likely cause few problems with the document layout.