The Odd Pixel Bug

By , 1 May 2007

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 Odd Pixel Bug

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

The Odd Pixel Bug

Leave a Comment

Please visit https://rogerkeays.com/blog/the-odd-pixel-bug to add your comments.

Comment posted by: , 10 years ago

Thanks Mauricio, I fixed that link up.

Comment posted by: Mauricio Samy Silva, 10 years ago

The link on the original example page sending back to the main article is broken.