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 positioniseverything.net 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.