Internet Explorer 100% Width Bug

In the course of working on a new web-based app at my day job I’ve come across a pretty common, but perplexing Internet Explorer bug. Perplexing because there is no silver-bullet fix. It is simply an error in the way IE renders, so there isn’t a simple style declaration fix for it. A colleague and I spent the better part of a day figuring out what seems to be a fairly optimal solution so I thought I’d share.

In our case we have block elements, tables being the main culprit, explicitly set to 100% width inside a container div which will scroll vertically as it needs to. The problem is that IE calculates what “100%” is before it applies the scroll bar. So when the scroll bar is applied IE’s “100%” value is now wider than the actual viewing area. This causes the element set to 100% to be partially covered by the right-hand scroll bar and for a horizontal scroll bar to appear.

After tying to find a solution using conventional CSS or JavaScript to get the offending elements to behave we turned to using IE style expressions. This is essentially what we did.

element_selector {
width: expression(this.parentNode.offsetHeight >
this.parentNode.scrollHeight ? '100%' :
parseInt(this.parentNode.offsetWidth - XX) + 'px');
}

So we’re telling the element that if it is not taller than it’s parent then it should be 100% otherwise it should be the width of its parent minus a specific value (XX): in our case the padding plus the width of the scrollbar.

I’ve successfully applied this technique in a few different places and it hasn’t bothered me since (especially since they are hidden in an IE specific stylesheet behind conditional comments. This isn’t to say I’m a fan of CSS expressions – they shouldn’t be necessary – but in this case they’ve proven to be the simplest and most reliable solution to an annoying IE problem.