IE6 non-compliant behavior

IE6 non-compliant behavior

When testing my own blog in Internet Explorer 6, I noticed that the text inside some posts was randomly disappearing. An example of what this looks like in IE6 is to the left. There can be several reasons why this happens, but the main reason is that following a "floated" element, IE6 sometimes loses track of the width of elements that don't have a height specification, no matter what value it is.

A floated element is one, such as a DIV or SPAN, upon which a CSS rule specifying "float:left;", "float:right;", or "float:none;" has been applied. Hovering your mouse over such elements randomly causes them to reappear.

I primarily use Mozilla Firefox for surfing and development work because it is compliant with W3C valid CSS standards and has a host of cool and useful plugins, such as Firebug. Firebug has an inspection mode where you can reveal any page element's CSS or HTML code merely by just hovering over it. You can also "inject" CSS, HTML and script statements in real time or comment out existing CSS rules to immediately see how the content is affected by such changes (my favorite).

Click on the below screen shot of Firebug to see what it looks like in action (and to see what the non-disappearing text should look like)...

Firebug for Firefox screen shot

Firebug for Firefox screen shot

Unfortunately IE6 (and IE7 as well) is not CSS2 compliant. In fact, I often find myself writing custom CSS code to compensate for the CSS shortcomings in IE. This behavior is no exception.

You probably don't need to implement this unless you are seeing disappearing text or element widths (e.g. floating div elements) that are wider than they should be. If this is the case, you can create a custom class in CSS for this which forces the element to have a minimum height.

How to fix this:

First, add the following to your CSS file or inside of inline style tags:
* html .visualIEFloatFix { height: 0.01%; }

Then, for the element yielding the errant behavior, reference this class name in your CSS like this:
<div class = "post visualIEFloatFix">
<p>Some post content.</p>

There is a more detailed discussion of this if you are interested at I hope someone can use this information.