Why Wait Webs

I don’t like Internet Explorer. I don’t think I’ve made that any secret. One of the reasons for that is that there are many instances where fully valid code won’t render properly in IE6 — many more instances than is the case with other browsers.

IE6 Showing its True Malevolent Self

Today I found the strangest and most terrible bug I’ve ever encountered. In Internet Explorer 6, my main content was completely invisible. Images and text alike were simply gone! The container DIV was stretched out as it would be if the content were there, and the text was selectable! If I highlighted the text, in fact, I was able to see it, even after de-selecting it. On a page refresh however, my content would simply disappear again, only to reappear when highlighted.

I consider this the most terrible bug ever because in most cases, a bug will rearrange your website, or make it look ugly, but users will still be able to access the content. The content is the reason for the site’s existence, and with this disappearing content bug, users of Internet Explorer 6 will not see your content unless they think to highlight it (and in that particular demographic, I’m willing to bet the odds of that are pretty low). Thus your entire site is rendered unusable and pointless. So read on for the fix!

It took only a small amount of research to get to the bottom of it — for what else could one call this bug, besides the IE6 Disappearing Content Bug? It is exactly as you might have guessed, a simply programming oversight, a glitch in the matrix, if you will. From my research no one has ever fully determined the cause, but essentially the use of floats in certain instances will cause your content to hide itself.

The Fix

It was simple enough to fix the bug, and ensure that my content was not hidden, did not disappear, and rendered properly in all circumstances (that I was able to test, anyway). First I applied position:relative; to the DIV that contained my content. Note that the DIV itself was not floated, though there were some floated divs inside of it. Which brings me to the next step, for now that my text was showing up, the floated elements below it which had previously appeared just fine were now hidden. So I tried the same thing again, applying position:relative; to the floated DIVs themselves. Worked like a charm!

In my instance, things all worked out okay like this, and if it’s possible, your disappearing content problems should be solved by applying position:relative; to all affected DIVs or other elements (as far as I know, DIVs are most common). But what if the DIV or element with hidden content is required to be positioned differently than relative? Well, I found a page that described a few other workarounds, although I haven’t tested them myself. Here they are:

The first of these includes wrapping paragraph tags around your floated elements. Yet again, this can cause problems sometimes. Putting an extra paragraph tag is also unfortunate, as it adds an unnecessary and unmeaningful element to the page, which is always a bad thing if semantics are important to you (and they should be, but that’s a topic for another day).

The final workaround I found involves removing the background property from upper-level DIVs. In most cases, however, this won’t work. In my case I had both background-image and background-color set, and both were needed. That said however, if none of the other workarounds would have worked for me, I would have experimented with wrapping an extra DIV around the content — one with no background. I have no idea if this will work or not, but regardless, it’s another unnecessary element on your page and comes dangerously close to Divitus. But if it’s the only way to get the job done and force your content to reappear and stay, it may just be a necessary element after all.

If none of these workarounds work for you, then unfortunately, as is frequently the case with IE6, you may have to rethink your layout a bit in order to get around this. Aside from that, all we can do is hope and pray that the remaining 20% or so of people will either upgrade to IE7, or ideally anything else.

If you happen to know of another workaround, or have anything else to say about this, fire away in the comments!