That annoying IE peekaboo bug just doesn’t know when to stop. Apparently, even IE7 exhibits this bug, and it appears to be worse than its predecessor. If you happen to be pressed for time (or are lazy to search the Internets for a solution), applying a couple of stylesheet rules to the affected element should solve most peekaboo problems for both IE6 and IE7:
position: relative; /* peekaboo bug fix for IE6 */ min-width: 0; /* peekaboo bug fix for IE7 */
Take note that I said most. These two lines work for me lots of times, but then again I don’t get to encounter every known variant of the peekaboo bug. What I like about this is that it takes a few seconds to apply (hence the “First-Aid” designation in the title), and it’s perfectly valid code: no hacks performed, and it doesn’t even need conditional comments. There will be instances where one or both rules may conflict with your own rules (or they just won’t work), in which case other fixes may be more appropriate.
Note: min-width: 0; can be replaced with any other (equally non-destructive) rule that triggers hasLayout, such as zoom: 100%;.
Thanks so much - this has helped me heaps
Thanks for that, a nice fix quickly found!
how much do I hate IE?
You know what, i’ve been cracking my head over what’s causing this for some people for a while now and had no idea it was called the “Peekaboo Bug” or what was causing it or how to resolve it.
… and that tiny bit of code provides a fix.
Blond females… Sheesh :D
Thankyou for this, Carly
will keep this on my bookmark just in case. :)
thanks.
–aj
And once again, so as not to offend the sensitive, I silently reiterate the long string of expletives towards the creator of IE and loudly proclaim my thanks for this little gem of a fix.
Thanks
Thank you so much — I was getting this problem in IE7 and could not figure out how to solve it.
I looked for the peekabo bug and ways to solve it. Many times i found this solution with min-height:0 and position:relative. But the last one wasn’t an option for me so i looked further …
I found another way myself and probably the cause of the peekabo. In IE6 a div has a default hight caused by a default line-height or somethings so people who create a clearing-div after floating items, create an extra height they don’t want.
The other sollution is to fix this height in your clearing div … like this:
div.clear{clear:both;height:0;line-height:0;font-size:0;}
Here is more information for reference:
http://www.positioniseverything.net/explorer/peekaboo.html
IE, come on, disappear~~~
I don’t know if my problem is the peek-a-boo bug in action but I can’t get the main content box to expand in IE. My temp workaround for visitors is to ask them to increase the page font size either through their browser on with the tool on my site.
I have spent hours searching for a way to fix this. My only problem is I am not sure where I would apply your code? Can anyone help?!!!!!!
http://www.canadianblues.ca
I could just kiss your feet!! I tried your code in the section that I thought was causing the problem and that did it! xoxoxoxoxoxoxoxo
well I spoke too soon. The fixes worked in IE7 but not in IE6. I don’t know anymore if my problem is the peek-a-boo bug. Your fixes solved my text not appearing problem but it did not fix the content box problem. It does not expand when the text overflows. Back to square one!
Toukie: It seems you have a different bug. The peekaboo bug involves elements not showing up, while your bug is more of a float issue. I’m glad the first-aid helped you in other problem areas, though. :)
Thanks. It helped me too.
Dang. This is an awesome find! 2 lines will usually patch it? Great info my friend. Glad I stumbled on ya here.
:O)
Just wanted to say thank you! IE7 hurts to develop for and this peekaboo bug has to be one of the more annoying!
cheers.
thank you so much! could’t believe this tiny bit of css saved me so much trouble!!
You rule. I did go with an absolute position because I am lazy that way. Nevertheless, my css tweak worked:
.hizMenu
{
z-index: 900;
position: absolute; /* peekaboo bug fix for IE6 */
min-width: 0; /* peekaboo bug fix for IE7 */
left:0px;
top:0px;
}
And p.s., you rule.
Thanks!
min-width: 0;
really works.
thank you for this solution
Thank a bunch !
Thanks mate. I’ve been searching for a solution for this PeekaBoo bug for a long time.
Nice one for sharing.
It works… thank you so much!
Thanks for the fix! This is the most clear guide I have found relating to the peekaboo bug in IE7.
Cheers!
Thanks for the fix!
Spot on; I love quick and simple fixes! Fortunately this was the first page that I came by. Greatly appreciated.
Thanks for the fix! saved me a lot of time:)
Nice one, cheers!