Floating div disappears when background-color added to parent div in IE7

Strangely, this happens with IE7 and not IE6.

Set Up:
Inside of the mother div is a floating div (with graphics and a Flash audio player—but the content is unimportant since I’ve tried it without the Flash). The child floating div has a border all the way around.


Problem:
When I add a background-color to the mother div, the child below the top border disappears. It’s still “visible” to the cursor (hovers still work), but no visual.


Solution:
Add position: relative on the child element. Happiness ensues.

From now on, any IE6 and IE7 visual glitches will be attacked with position: relative and zoom: 1. It seems that either one or the other works in 80% of cases.

Solution for negative margins/indents bug in IE 6

Over two and a half years ago, I wrote about this bug for which I didn’t know a fix. This week, I’ve had the problem resurrect, and after more Googling, found the solution from another blogger. Here it is:

Give the child that is getting cut off, haslayout like so:

<!--[if lte IE 7]>
 <style type="text/css">
   #child {
     zoom: 1;
     position: relative;
   }
 </style>
<![endif]-->

In my situation, I’ve used just position: relative; to fix both IE 6 & 7 because using zoom: 1; wrecked the auto width of the child element. [Don’t know if this fixes IE 5.x, and don’t care.]

I’ve read from others that the reverse sometimes cures, too, so I suggest trying both, then trying one or the other to see which gets the result you need. Buffet-style IE hacks!

Woohoo! I can finally cross this one off.