September 5, 2004 12:42 PM
Floats and clears. They are common positioning practices in a table less CSS design. Consider the menu aligned to the left of this page. It does so using a float:left. When the content on the right side is lesser than the menu height-wise, the menu overflows out of the parent container and into the black background. An outdated fix for this uses <br clear="all"> at the end of the footer. The CSS way to fix this is using a clear:left in the footer container. It works perfectly in Mozilla, Konqueror and Internet Explorer 5.x. But not in Internet Explorer 6 where an absolutely weird display results. IE 6 hides text and displays them properly only during a hover over a link or after redrawing the browser window. At times, cursor movement over links cause content to disappear and re-appear. It was noticeable in Search Page. It's a strange and widely documented1 bug. There are numerous ways to fix this, but I prefer the Holly Hack since it has no side effects.

The idea is to use a comment backslash hack2 to prevent other browsers IE 5 or lesser from seeing a Tan Hack that sets height:1% for the parent container. If menucontainer (the one floated left) is nested inside container, the following code is the fix for the IE 6 clear bug:

/* begin hide from ie5 \*/
* html #container {height:1%;}
/* hide end */

Be sure not to omit any of the comments. Otherwise the comment backslash hack won't work.


[1] At and css-d.
[2] A backslash just before the comment closes acts as an escape character and causes only IE 5 / Mac to think that the comment hasn't ended. It's also called the Mac hack.

Copyright © 2004-2011 Anirudh Sasikumar. All rights reserved.
Last Updated: January 21, 2005 4:27 PM