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!
Hi
Thanks alot for your solution. I am trying very hard to fix this by doing various things. Finally found this blog through Google. Once again thanks a lot.You might have spent lot of time to fix this and saved our time.
Keep doing good work
Thanks.
Thanks so much – this has helped me too……
Oh holy cow… That really did fix it! Saved me from an infinite loop of trial/error/fail.
For those searching for the symptom: my problem was with invisible border lines or hidden border lines around floated content in IE7.
What can I say? Many thanks for supplying this simple but very effective piece of code – it works a treat.
When I first noticed this bug I couldn’t believe what I was seeing. It was also quite difficult to find out what was causing the problem as I didn’t know it was called the “peekaboo bug” – I have been searching using a mash up of phrases including “wordpress ie7 text disappears when scrolling” and I found “peekaboo” mentioned on another post. It was only when I searched for “ie peekaboo bug” that I found your post.
If you add some more wording to your page you may find yourself getting a load more traffic!
Anyway, thanks again for the solution. It works a treat.
wow im glad i found this! I was able to fix divs that were using jquery slideup/slidedown with these lines of code.
Just adding my thanks to this long list…
min-width + IE7 = harmony :)
I need to type in a blog post of my own once I isolate a reproducible demo, but there are variants of the IE7 peek-a-boo problem that are definitely NOT fixed by giving either the affected block or any container blocks the “hasLayout” property. I appreciate of course that resources like this are available, but in case you’re reading this and your floated block continues to randomly disappear even though you’ve tried “min-width” or “min-height” or “zoom”, know that you’re not alone.
Thanks for sharing this fix..