IE bug - background images, floating blocks

Tags: 

There's a bug in all versions of Internet Explorer, including the latest IE7, whereby if you have a floating block in a block inside another block which has a background image (possibly also background colors), text will disappear. I was hitting this at work where we had two columns created using floating blocks, inside two separate blocks that each had a background image, and just above the columns was a heading - the text within the columns showed up but the heading always disappeared after the images finished loading. While there are some detailed explanations of why this bug happens, nothing quite explained my scenario or had a fix for it. Well, after poking around with it for a while I came up with a nifty fix: I put the heading inside a DIV that was set to 100% and floating to the left, which worked wonderfully!

How to reply

Care to add your own 2 cents? Let me know via Twitter or my contact page.