The problem

Displaying a page in Internet Explorer causes text to disappear, or elements to be wider than their proper width.

There is not general way to fix this problem on a page-wide scale, so you have to test your pages in Internet Explorer and see if they exhibit this behaviour. If they do, you can apply a simple class to that element, and it will behave the way you intended again.

Some examples

Below are a couple of examples of the bug as they normally appear in Plone:

The classic example of disappearing text in Internet Explorer. Here we see that the headline of the Plone welcome page is only visible when selected. The cause of this is a floating element to the right (the default document actions print/send to friend icons in Plone).

A related bug is the double margin bug in Internet Explorer, which is also fixed by applying this CSS trick. Notice the erroneous area on the left side of the board post that shuld not be there. This is caused by the same bug in Internet Explorer that mis-calculates element sized when using floating elements in your layout - in this case the portrait image on the right.

The reason

Detailed explanation can be found in the page about the Internet Explorer Peekaboo rendering bug. I'll mostly deal with how to fix the problem in this how-to, but read this if you are interested in the in-depth technical explanation.

The solution

Plone 2.1 (and later versions of the 2.0 series) contain a CSS class called visualIEFloatFix which applies the so-called "Holly hack" to get around bugs in the Internet Explorer rendering engine.

The rule looks like this:

    * html .visualIEFloatFix { height: 0.01%; }

The * html part is to hide it from Internet Explorer 5 on Mac, which has a totally different rendering engine, and does not exhibit this problem. Additionally, we have structures in Plone that hide this rule from all browsers that are not Internet Explorer (without using browser sniffing), so no other browsers get this style sheet. So it's perfectly safe in us on any browser.

If you use a version of Plone that is older than 2.1, please check that your visualIEFloatFix matches the above, since this bug has gone through a few iterations before reaching its current form.

What this rule does is to apply a very small height to the element, forcing Internet Explorer into something called "layout mode". The reason for the disappearing text problem is that IE caches the size of elements erroneously when handling floating elements, and setting a very small height forces Internet Explorer to re-calculate the height - thus making the text appear again.

How it affects Plone specifically

I have added the fix to be implicit on several commonly used elements that will never be without height. The full list can be found in ploneIEFixes.css, just do a search for Holly hack.

The fix will never be applied in any browser that is not IE because of Plone's setup of the ploneIEFixes.css file.

Some examples of application

You will experience this bug in your own applications sooner or later. Here's an example of how the bug in the screenshot above (double margins) was fixed in the Ploneboard product:

    <div class="boardConversation">     
      <div class="boardComment visualIEFloatFix" tal:repeat="comment comments">
        <metal:comment metal:use-macro="here/comment_view/macros/comment" />
      </div>
    </div>

The important part here is that we apply the visualIEFloatFix class to the comment container - and the bug magically disappears. Also notice how you apply several classes on the same element - by space-separating them. A surprising number of people don't know that it is possible to apply an arbitrary number of classes to an element.

Final words

As you can see, this is a very hard bug to track down if you don't know the cause, and has cased quite a lot of "WTF!" moments throughout the history of Plone. It is also possible to create layouts that need multiple fixes like this, and it's not always possible to find the logic behind the madness - so at that point you will just have to spray your code with the fix until the problem disappears, and test copiously.

I hope this article has been helpful for you, leave comments below if there are things I have missed or that are unclear.

Alexander Limi, Plone Solutions