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/).

Answer 2

This works, although it's extra markup.

<div id="box_that_wants_a_gradient">
    <div class="gradient_background_1"></div>
    <div class="gradient_background_2"></div>

My content

</div>

There is a bonus to this tactic, as you can add multiple gradient boxes and set their heights/widths as a % of the parent, thus emulating the "colour stop" behaviour allowed in safari/moz.

For example:

<style>

#box_that_wants_a_gradient {
  position:relative;
  display:block;
  height:100px;
  width:100px}

.gradient_background_1 {
  position:absolute;
  height:20%;
  *cbf writing out microsoft filter code*;
  top:0;
  width:100%;
  left:0px}

.gradient_background_2 {
  position:absolute;
  height:80%;
  *still cbf writing out microsoft filter code*;
  top:20%;
  width:100%;
  left:0px}

</style>

Answer 3

I know this doesn't answer your question in particular, but consider your audience. Are they all just Internet Explorer users, or do they represent natural internet user proportions? If they are not all just IE users (maybe in a corporate/education network) then consider using only the standards-compliant methods, and allowing the application/site to degrade gracefully to a browser that doesn't support it, like IE.

Now, for your question. The reason why it's not working as you expected is that the box does not extend to the end of content, even when overflow is visible. The content simply 'walks' outside the box, but this doesn't make the box bigger. There is no way you can get the box to extend to fit the content, except for not setting the width and/or height properties fixed. In fact, IE had a bug in which instead of overflowing out, the box did extend (this was a bug).

I can recommend one tip though; use min-<width/height> and max-<width/height> instead of width and/or height. They allow you flexible box sizing, with guided boundaries.