I think, therefore I blog

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.


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


About Roger Keays

The Odd Pixel Bug

Roger Keays is an artist, an engineer, and a student of life. Since he left Australia in 2009, he has been living as a digital nomad in over 40 different countries around the world. Roger is addicted to surfing. His other interests are music, psychology, languages, and finding good food. Click here to subscribe to his weekly blog, or stalk him on Facebook and Twitter.

Leave a Comment

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

Comment posted by: , 9 years ago

Thanks Mauricio, I fixed that link up.

Comment posted by: Mauricio Samy Silva, 9 years ago

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

Join 3,559 People Who Think Outside The Box

I write every Sunday about travel, psychology, technology, and all sorts of interesting stuff. It's completely free, and you can leave whenever you like. Subscribe now, and you'll be the first to get new articles each week.

Read a Good Book

“A spellbinding true story of love, passion and adventure. One can’t help but be swept away by 100% Love Guaranteed.” —Dr Tammie Matson, author of Elephant Dance.

Chat For A While

Your Vote Matters

Which animal will take over when humans go extinct?