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.

Answer 3

i took a tip from the checked answer here & the linked question, but didn't want to use an empty DIV (especially because other browsers don't need it).

Instead, i set up IE8-specific CSS that uses the container DIV's :before pseudo-element.

However, pseudo-elements are styled content, not DOM objects, so the -ms-filter property is useless. To compromise, i use a PNG matching the original filter i wanted (actually a data: URL, but either works) as the background-image.

i force the pseudo-element to the full size of the container, absolute-position it, and ta-da, the child element is visible outside the parent, and the parent still gets a transparency background.

.container.ie8 {
    background-color: transparent;
    position: relative;
}
.container.ie8:before {
    background-image: url("data:image/png;base64,...");
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}