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

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.

Answer 2

I'm having the same problem, did you find any way to solve it?

Answer 3

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>