css - How do I stop internet explorer's propriety gradient filter from cutting off content that should overflow?

Question

I'm using the internet explorer gradient filter in my CSS.

It was all going well until I noticed that images that are supposed to extend beyond their containers overflow:visible; are getting clipped as though the container was set to overflow:hidden;

I have no idea why this would happen, or how to fix it. Can anyone help?

I'm looking at it in IE8 and IE7

This is the css causing the issue, when I comment it out, no more bug:

.box{
filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#b4cfe9', endColorstr='#e4eefc'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#b4cfe9', endColorstr='#e4eefc')"; /* IE8 */
}

Answer 1

This may help those who are choosing to drop support for IE7.

IE7 will always have a problem if the element is positioned (relative/absolute/fixed). In IE8+ the problem goes away if z-index is set to auto.

If you are needing to support IE7, or if you are needing to stack things using z-index, you must settle for a second wrapping DIV.

<div class="position_me_and_stack_me_with_z-index">
  <div class="give_me_a_filter">
    Content goes here
  <div>
</div>

Edit 2012-05-29: I have created an example to show how to fix this problem. I created the example to solve a z-index stacking issue... and it just so happened to fix this problem too (http://jsfiddle.net/ryanwheale/gz8v3/).