How to Stop Internet Explorer's Propriety Gradient Filter from Cutting Off Content That Should Overflow

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

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>

Positioning an element from :before/:after outside its boundaries in IE

Take a look at this: Creating a CSS3 box-shadow on all sides but one

It involves a bit more html, but IE and pseudo-elements can drive you nuts. That answer also includes a shadow for the menu "baseline" but without deeply looking into it, I think it can be safely removed.

Good luck!

Nested UL Dropdown Menu being cut off

RESOLVED:

Evidentally, Internet Explorer propietary filters cause divs to act like they have "Overflow: hidden;" set even if you try to explicitly set them to "overflow: visible;".

I had a "filter:" gradient set the div and that was causing the problem. But its also been stated that alpha/opacity filters can cause the same behavior. The problem is described in detail with a hack here:

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

I ended up just removing the filter completely and letting IE visitors not see a gradient. I hate hacks. They're not worth it.

IE 8 absolute positioned element outside its parent clipping problem

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)";
}

Z-index or overflow issue, on a css menu, with gradient background in IE 9

No one found the solution ? ;-)

The issue was made by using the z-index property.

It's crazy, but IE doesn't like it in this case, I don't know why, if anyone could find a good reason, let me know...

Demo with gradient and without the z-index.

The line changed

.header {position:fixed;width:100%;left:0px;height:110px;}

Dropdown menus not being displayed in IE (hidden behind content)

Try using position: relative and z-index: 100 on the id=nav div. Z-indexes work in layers. If the parent of an element has a z-index of 0, and the that element has a z-index of 100, the element would still appear behind another element that is the sibling of the parent with a z-index of 1.

---

The issue was a direct result of using the filter on the #navul ul. Somewhere in its calculations IE makes the element automatically hide any overflow. To fix, move the background to its own element and absolutely position it.

http://jsfiddle.net/uTBZN/30/

Credit to:

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

Gradients in Internet Explorer 9

You still need to use their proprietary filters as of IE9 beta 1.

Why does a filter gradient on a pseudo element not work in IE8?

The question is "Why don't filters work on pseudo elements in IE8?" The following is as close to a definitive answer as I can muster. It comes from the information on this page.

The gradient filter is a "procedural surface" (along with alphaimageloader). A procedural surface is defined so:

Procedural surfaces are colored surfaces that display between the
content of an object and the object's background.

Read that carefully. It is essentially another "layer" you might say between the content of an object and that object's background. Do you see the answer to the question? What is created by :before and :after... Yes! Content. Specifically as MSDN notes:

The ::before and ::after pseudo-elements specify the location of
content before and after an element in the document tree. The content
attribute, in conjunction with these pseudo-elements, specifies what
is inserted.

The generated content interacts with other boxes as if they were real
elements inserted just inside their associated element.

Now, if it is content that is generated, then it is not an "object" containing content, but the content itself (which happens to have some behavior similar to an element object that might contain content).

Thus, there is no "object" containing "content" (since it is content) between which the filter can place a procedural surface for content generated by a pseudo-element (i.e. "false element"). A gradient must be applied to the object, and then the procedural surface is placed between it and the content.

CSS3 gradient background set on body doesn't stretch but instead repeats?

Apply the following CSS:

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

Edit: Added margin: 0; to body declaration per comments (Martin).

Edit: Added background-attachment: fixed; to body declaration per comments (Johe Green).

---

Related Topics