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

I solved it using this How do I stop internet explorer's propriety gradient filter from cutting off content that should overflow?

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)";
}

Answer 2

Try making the elements inside the absolute positioned element position:relative, and/or add a wrapper around all the elements in that absolute positioned element and relative it.