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.
Okay, I’m going to have to file this away in del.icio.us for future reference. Thanks! 🙂
Hmm, interesting. “inline-block” eh? I’m going to have to remember that one next time I see one of these bugs. I’d be interested to try it out. The FnE usually seems to take care of the problem for me, but does involve some extra fine tuning. Simply applying a class would be key.
I wonder how this works in IE5/Mac and Windows? The reason I’ve always like the FnE method is because it usually fixes layout problems in IE/Mac.
“Float Nearly Everything” was a great read…I’d never seen Steve Smith’s blog before but have been floating containing blocks to contain the overflow of child blocks for some time. It is a very concise explanation of the technique that I’ve been fumbling around with for some time. I think I’ll add “Ordered List” to the webdesign folder in my Bloglines.
Hmmm. Interesting solution – I had this problem and found that actually defining “position: relative” (instead of letting css assume) also fixed it. Must go back and try your method as well…
YES!!!!
I have been looking for a solution for this problem for hours now. Thanks!