Monday, December 6, 2010

IE7 Background Ghost When Element is Hid

There seems to be little documented on this issue. I will share it here if anyone ever come across this issue. Keep in mind that I am using jQuery, not sure if it makes any difference. Also I didn't try to reproduce in a standalone example because I don't have enough time; but you would not be reading this if you don't have a similar problem anyway.


<div id="parent">
   <div id="child"></div>
   <div id="child2"></div>

#child has a background image. #parent is then hidden by
and then #child is hidden by
When you open #parent again, you still see the background image of #child even though it's already hidden with style="display: none;". When you mouse over it, the background image would disappear.


Hide elements in order of inner element to outer element. i.e.,

I spent almost 2 hours debugging this. Hope this post can save you some times.