IE 8 absolute positioned element outside its parent clipping problem

Question

I have an absolute positioned div inside another absolute positioned div. The child div content is much bigger than the parent can contain. This is by design. I need the child div to spill out of its parent. It does so in every other browser except IE 8 (IE 7 looks OK, not sure) In IE8 the part of the child that is out of parent is clipped. It is there, but just not visible as can be verified by IE developer tools. I tried z-index, tried explicitly setting overflow:visible, no luck at all.

UPDATE: I found out that the problem is caused by a filter defined in the parent div like this:

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#66C6DEA2,endColorstr=#66C6DEA2)";

Anyone has an idea how to work around that?

Answer 1

Try making the elements inside the AP'd element position relative, and/or add a wrapper around all the elements in that absolutep'd element and relative it.

Answer 2

I solved it using this http://stackoverflow.com/questions/2756851/how-do-i-stop-internet-explorers-propriety-gradient-filter-from-cutting-off-cont

My solution is a little modified, just put an empty div with class "ie_rgba_fix" inside the container you want transparent, add this CSS someplace IE specific and the children will not clip anymore as with overflow: hidden

/* IE8 RGB A workaround */
div.ie_rgba_fix
{
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#66C6DEA2,endColorstr=#66C6DEA2)";
}