The Odd Pixel Bug

Posted by Roger Keays, 1 May 2007, 5:32 PM

When writing up my last blog on CSS menus I took the opportunity to investigate one of those 1px inconsistencies in Microsoft Internet Explorer. It was particularly important because IE7 doesn't have the defect, while IE6 does, and my CSS hack was targeting both browsers. After some digging on the web, I finally found an accurate description of the problem [1]. The cause is so obscure that it surprised even me, and I'm fairly hardened to IE rendering defects.

The problem is that when Microsoft Internet Explorer 6 calculates the bottom of an element which has an odd height (in pixels), it is short one pixel. Any absolutely positioned child element which positions itself relative to the bottom of the containing block (e.g. top: 100% or bottom: 0), will show a one pixel gap.

Here is a live example of the Odd Pixel Bug, used to create the above image. The container doesn't set a fixed height, so if you can't see the bug in IE6 try changing your font size.

I couldn't find a fix to this problem on the web, but I've come up with one myself which uses IE's CSS expressions to fix itself. Previously, I had hardcoded a fix on a case-by-case basis, but this doesn't allow for fluid-height containers which are common when visitors like to change their font size. Here is the fix:

.oddpixelbug {
  _bottom: expression(this.parentNode.clientHeight % 2 == 0 ? 0 : -1);
}

The solution uses the underscore hack to target IE6, and a javascript expression to determine the value of the property which needs to be adjusted. Which property you need to modify depends on your layout, but for the example above we've fixed the bottom property.

View the original example with the fix incorporated.