Zoffix CSS - IE Hacks
IE Peek-a-boo Bug
Affected browsers: Internet Explorer 6 on Windows
This is bare text.
Test link
This is bare text.
Test link
This is bare text.
Test link
This is bare text.
Test link
Clearing div
This div is after the cleared div. (purple box) If cleared div
does not touch float, bug is not triggered.
Test link
Imagine you have created a div that includes a floating element along with some content. Below the floated div is another div that
is used to clear the float. In any modern browser everything works fine. However, when you test the page in
IE 6, none of the content next to the floated element is visible. If you minimize and then restore the browser or sroll up and down the
content suddenly appears. No wonder why it is called a Peekaboo Bug. The demo above demonstrates this bug, try viewing this page in IE 6.
It seems that the bug is caused when the clearer div is physically touching the floating div.
The solution would be to specify some height for the containing element, and is known at the
"Holly Hack". This, however, is not a good solution in many cases, because you would often want the container to expand automatically. Any standards compliant browser restricts the element to the specified height, but IE, that we all love so much, incorrectly expands the container to fit the excessive content, therefore a good solution would be to place the
"Holly Hack" into the
conditional comment for IE 6.
Why does the
"Holly Hack" work? It appears that when Internet Explorer rendering engine evaluates a floated element, it checks to see whether or not the
hasLayout property is set to true. If it is true, the floats are rendered according to standards, if not you will see the Peekaboo bug, along with many others. According to
Microsoft's documentation hasLayout is set to true if any of the following conditions are met:
- zoom is set to any value
- writing-mode is set to tb-rl
- display is set to inline-block
- float is set to either left or right
- height is set to any value
- position is set to absolute
- width is set to any value
Two properties that you may not be familar with are
zoom and
writing-mode. Those are IE only properties and should be put in an
IE conditional comment to make the code valid.
zoom property specifies the elemet's scale, thus
zoom: 2 will render the element twice its size and
zoom: 1 will render the element as it is.
writing-mode property is a proposed addition to CSS that determines how the text should be written. The
tb-rl value stands for "top to bottom, right to left" a typography style used in East Asia. Western typography is depicted left to right, top to bottom, which would be
lr-tb value for writing-mode property.
That is all! Happy fixing =).
This page was written by Zoffix Znet. It may be copied, modified, and distributed freely as long as it attributes the original author and maintains the original license. See the license for details.
This work is copyright © 2006 Zoffix Znet and is licensed under a
Creative Commons Attribution Share-Alike License.