Jasongraphix

Magic Beans

I have seen so many “hacks” to fix CSS layouts in IE that sometimes they all sort of run together in my mind. So, when one of the layouts that I was developing at work started randomly hiding elements, I thought it might be related to the “peek-a-boo” bug, but couldn’t remember what the fix was. The affected blocks would just not show up as the page loaded in IE. Sometimes rolling over links would make one of the blocks disappear or reappear, but they seemed to all be acting independently. See the two examples below:

Before Magic Beans:

After Magic Beans were applied:

In Googling for an answer I came across what is perhaps the best summary of IE bugs, as well as one of the most intuitive solutions to them. In a thread on Webmasterworld, DrDoc explains that although “position:relative”, “line-height”, and “height” solutions to the Peek-a-boo bug work, they overlook the main problem.

So, all this got me thinking — there must be an easier approach? After all, these are all various display bugs that… Wait a second! “Display” bugs? So, perhaps the display property may hold the fix? The fix for the doubled margin bug may not have been a coincidence!

And, in fact, it appears that the display property holds the answer and solution to all of the above bugs. Finally, no need to memorize different bugs or different solutions, hacks, their pros and cons. There is just one bug, and one solution!

His solution was to set the display property of elements affected by duplicate characters and doubled margin to inline, and for the rest of the bugs (including Peek-a-boo) to set the parent or wrapper div of the affected elements to display:inline-block. Inline-block is currently in the candidate release for css 2.1, and IE is one of the few browsers that actually impliment it. I created a “fixdisplay” class which I affixed to the containing blocks of all the elements performing random disappearing acts and…viola! No more disappearing/reappearing blocks. Just to be safe, and since this is only an IE thang, I defined the class in a way that only IE understands:

* html .fixdisplay {display:inline-block;}

Fee-fi-fo-fum, Browser bugs are not much fun.