Occasionally, text does not show up in IE6 or IE7, while they look perfectly fine in other browsers.  More strangely, upon scrolling the browser up and down to bring the “invisible region” in and out of the browser window, the text shows up again (see demo).

While someone has documented this behavior with great details (here is another one), here is a short summary of the cause and fix:

The Cause: Such behavior happens when the text is a descendant of a container that has CSS float turned on, occasionally have background color or background images without defining the container’s layout (such as width/height, position) would cause the background paint over the text.

The Solution: Define zoom: 1 (IE6) or min-height: 0 (IE7) in the CSS along with where float is defined, this would correct the behavior most if not all cases.

Update Dec. 28, 2010: Cayenne Web Development has a more detailed explanation to this problem.

Advertisements