Webdeveloper Weems And the Case of the Disappearing Content

Ok, "Webdeveloper Weems" doesn't have the same ring to it as Indiana Jones. Some of us just have to work with what we have. For that matter, "web developer" is two words. Cool monikers (or the lack thereof) aside, a major problem often experienced by new css designers is parts of a web page's content disappearing in IE even if it's showing nicely in every other browser.

I should know, I have this problem all the time. I'll happily whistle away while adding styles to a website in Firefox (as is my practice, thanks to Firefox's relatively high adherance to actual standards), and when I'm done I'll briefly check Internet Explorer to see what changes I'll need to make (there's always some). Lo and behold, the page looks fine, except to my shock and dismay, some of it is missing (note to self, use the word 'lo' more often).

When I say missing, I don't mean merely misplaced to the side, or stuffed into the wrong part of the page, or somehow overlapping with another section of the page in some sort of Pablo Picasso nightmare. I mean completely absent. 

Perpelexed, I'll check the page's source. Yes, the content is there. But, when I view the page, it isn't.

If unfortunate enough to be like me, you'll then spend way too much of somebody else's money trying to figure out where it went. You'll turn styles on and off. You'll change position from relative to absolute. You'll tinker with every bloody style in your stylesheet. All to no avail. The only way to seemingly make the missing content appear is to remove ALL the styles, which I'm sure you agree isn't really a workable solution. I envision a client's response being something like this:

Me: "Here's your webpage!"

Client: "It's… uh… a wall of plain text."

Me: "Yes, but it's visible text. I'm sure you'll agree that's better than the alternative." 

Client: "So I paid you for…"

Me: "Well… uh… is that a rabbit over there?" (mad dash ensues).

Before you check yourself into a sanitarium (do they even have 'sanitariums' anymore? Or is that word out of style?) I'd reccomend reading up instead on what's likely causing a problem with content disappearing in IE when it's visible elsewhere. It's called the Disappearing Content Bug. (A well thought out name, in my opinion).  In short, sometimes a div or other element on a page has a background property but doesn't have the 'hasLayout' property, or a floated element has a 'clearer' element after it, but that has the hasLayout property, etc.

What's the 'hasLayout' property? As near as I can tell, it's Microsoft's propriertary method of driving web developers insane. It's not a part of CSS or any standard, but can be triggered by styles applied to elements in certain ways.

To solve the problem, you often need to either put the hasLayout property on the missing element (or perhaps the element's parents, it gets complicated) or, more ideally, don't use a clearer element. The latter option is the better, but it's not always possible to do (here's a list of alternatives that I'm not explicity advocating, but that are worth researching). When that can't be the case, try to explicity add the 'hasLayout' method back to the element (sometimes you'll have to do it anyway). When that's the case, you can trigger it with some various CSS methods, such as:

  • position: absolute
  • display: inline-block
  • width: any value other than 'auto'
  • height: any value other than 'auto'
  • zoom: any value other than 'normal' (this is a proprietary MS style and doesn't validate)
  • writing-mode : tb-rl (also a proprietary MS style and doesn't validate)

Mind you, you'll have to experiment some with these. Not each solution will work for each problem, and some will introduce their own issues. If you need to use zoom or writing-mode, I'd suggest putting it in a seperate IE-only stylesheet hidden behind a conditional comment, so it doesn't cause any validation issues (you can learn about conditional comments in my earlier post here.

Good luck finding your disappearing content.