Thursday, July 16, 2009

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.

Labels: , ,

1 Comments:

Anonymous Anonymous said...

Thank you! you helped me out. I love me some position: relative when it comes to IE!

:)

Tue May 18, 02:38:00 PM 2010  

Post a Comment

Links to this post:

Create a Link

<< Home