Impressive vanishing act!

I might go totally ape-shit one day, but at the moment I've avoided the potential crisis. Once again it's IE's buggy rendering engine that's causing me problems, again nearly making me loose my few remaining marbles. Today, out of the blue, random headings across this site suddenly did an impressive vanishing act. The problem was that I really wanted them there, and in no way tried to make them disappear.

Titles suddenly disappearing in Internet ExplorerYou can see the result in the screen shot on the right hand side. At the top is how it should be, at the bottom how it often appears. Often minimizing the browser window then maximizing it again forces the text to reappear, I also found that selecting the (hidden) text displays it again (also when the text is un-selected). When first noticed I don't remember making any changes to my style sheet, so I'm not actually sure what triggered it on this site.

A quick research tour around the web indicates that this happens on floated div's witch have been assigned a background color. As usual (with IE) there's no real reason why this should happen. Luckily, at least for me, Matthew Somerville has experienced the same problems and he's come up with a brilliant and quick fix!

If a div is given a background colour and contains floated items (floated using CSS's float or HTML's align on images), things can go very wrong in Internet Explorer(...)

Internet Explorer 6 sometimes hides some or all of the main content of the div; additionally in Internet Explorer 5 and 6, if the container is given position: relative, the floated items disappear. Contrary to other reports, no spacer div of any sort is necessary to provoke this bug - none is in use in the examples given here. Scrolling down to hide the missing section and then back up 'cures' the problem, but this isn't exactly a viable solution.(...)

My solution is simpler: give the container div a line-height. The default line height of browsers appears to be around 1.1-1.2, so setting line-height to around that provides no or hardly any visual change, but cures the bug in IE.

As this bug only affects IE, I've coupled Matthew's "line height countermeasure" togheter with a selector that's only picked up by IE. And at the end of the day I ended up adding the following definition to my style sheets (omicron is the identificator for this site's main content area).

* html #omicron {
   /* IE: Text Re-appear... */

   line-height: 1.2;

Couldn't generate page, however a cached copy was found and served on the 1st of January 1970 @ 00:00 in 0.000 seconds...

Errors occurred while generating this page... (More info availible)