The Odd Pixel Bug

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.

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.

References

[1] http://www.pmob.co.uk/temp/onepxgap.htm

About Roger Keays

Roger Keays is an artist, an engineer, and a student of life. He has no fixed address and has left footprints on 40-something different countries around the world. Roger is addicted to surfing. His other interests are music, psychology, languages, the proper use of semicolons, and finding good food.