19

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 */
}
David Meister
  • 3,941
  • 1
  • 26
  • 27
  • Some sourcecode and a live example would be useful :) – Kyle May 03 '10 at 08:32
  • no live example, I hacked a solution by applying the gradient to an extra absolutely positioned div with the same height and width as the parent div I originally wanted to shade. I'm still curious about why the problem was occurring in the first place so I can fix it and avoid the superfluous markup in the future. – David Meister May 03 '10 at 09:09
  • 1
    try looking at http://www.satzansatz.de/cssd/onhavinglayout.html#filter and the linked http://www.satzansatz.de/cssd/tmp/alphatransparency.html - they may (or may not) answer your question but IE's `hasLayout` tends to have a central role in these type of questions, maybe it's forcing content to be clipped? – cryo May 03 '10 at 09:33
  • that actually looks like something worth looking into. Thanks David. – David Meister May 03 '10 at 10:32
  • Here's an example: http://jsfiddle.net/thugsb/ZcT8G/2/ It only seems to happen in ie7, ie6 fails to render the gradient at all. – thugsb Jun 30 '11 at 20:56

4 Answers4

11

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

Ryan Wheale
  • 26,022
  • 8
  • 76
  • 96
  • +1 since your answer helped me understand why rather than just giving some markup that addresses the specific case. Looks like it turns out that any proprietary MS filter will clip internal positioned elements. Thanks. – jinglesthula May 02 '12 at 22:45
  • Wish i could give you +25 at least :) . After wasting 3 hours for this fix, finally found your comment. z-index:auto worked for me.. Thanks dude :) – abhilashv Mar 28 '13 at 11:27
  • Only 3 hours?!? How I envy thee ;) – Ryan Wheale Mar 28 '13 at 15:47
10

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>
David Meister
  • 3,941
  • 1
  • 26
  • 27
  • 2
    PS - the extra writing is heinous, I've gone back to images, for now.. hopefully chrome finishes off IE in the next few years. – David Meister Jun 12 '10 at 10:47
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.

Delan Azabani
  • 79,602
  • 28
  • 170
  • 210
  • You're right, the first bit didn't answer my question. The second bit isn't right. I *want* my content to "walk outside the box" as you put it, the point is that it doesn't, and it only stops overflowing correctly when I apply the gradient filter. – David Meister May 03 '10 at 08:49
  • Ignoring the requests of my clients only decreases the chances of future employment. Is your reluctance to help make the internet work as efficiently and neatly as possible for *users* of the internet because you won't or just because you can't and it's easier to be derisive than answer my question? I don't see how doing this is worse than including extra http requests for images of every gradient on the site. – David Meister May 03 '10 at 09:16
0

I set parent div's position to relative and it worked :) (or absolute, works fine too)

Paul Fleming
  • 24,238
  • 8
  • 76
  • 113
Arthur Lataks
  • 1