01 Sep 08
IE Peekaboo Bug and HasLayout fix
Been chasing all manner of mysterious layout problems with another blog I’m responsible for, that seem to only hit Internet Explorer 6… I’m using the infinitely cool Wordpress Tabbed Widgets plugin to show off a bunch of RSS feeds. Firefox, Safari and IE7 are immune… but the bedbug is biting me on this one.
After much mystification, what finally seems to be happening is called by some the Internet Explorer 6 peekaboo bug:
http://www.positioniseverything.net/explorer/peekaboo.html
A liquid box has a float inside, and content that appears along side that float. All is well, until it’s viewed in IE6. “Wah? Where’s my content?!” You reload the page, and nothing. When you scroll down, or perhaps switch to another window, upon returning to the ’scene of the crime’ there it all is, fat ‘n sassy! …
There are three ways we know to prevent this bug.
- Keep the clearing div from touching the float, or avoid using a background on div#floatholder. Not exactly ideal.
- Give both div#floatholder and div#float ‘position: relative’. Be sure to fully test this method.
- Give div#floatholder hasLayout (now the preferred method)
Now if only I can decipher their discussion, I’ll be thrilled because I can work around it.
but it’s pretty clear this is the source of my woes.
I’m getting too old for this stuff.
























