Question

I have this HTML:

<div class="demo">hello world</div>

and this CSS:

 .demo { width: 100px; 
         height: 50px; margin-bottom: 50px; 
         background-color: red; position: relative;
         z-index:-1;
         filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorStr=#40ffffff,EndColorStr=#12ffffff);zoom: 1;}
 .demo::after { 
         width: 95px; 
         height: 95px; 
         position: absolute; left: 0; top: 0; border: 5px solid blue; content:""; 
         background-color: yellow; opacity: .75;}

I wanted the pseudo element to completely cover the origin element (which contains a 50% gradient for IE7,8 – therefore height: 50%, margin-bottom: 50%;)

However in IE9… the ::after element only covers 50%, although I specifically set the height to be 44px. Is this because of the use of filter? Any idea how to override it?

Here is a JSBin of the example.

Thanks for help.

UPDATE

Here is an example of the whole thing:

Example

Notes:

• see comments in the background.css file
• I can’t change the element structure or assign gradient to any other element than .ui-icon
• The gradient should cover 50% of the footer. Footer is 44px so gradient stops at 22px
• IE7+8 cannot do this (or color stops), so I making .ui-icon height 22px plus filter-gradient
• using ::before I add the gradient for all other browsers sitting on top of .ui-icon

Problem 1 = IE9+ renders ::before – I use z-index:-1, so .ui-icon sits behind ::before = OK

Problem 2 = on IE9+ the ::before background is cut off by .ui-icon.

Question: How can I avoid the gradient in ::before being cut off?

Answer 1

Is this because of the use of filter? Any idea how to override it?

Yes, it’s because of the filter. Using filter causes an overflow:hidden-esque effect.

You might be aware that :after is rendered inside the element, like this:

<div class="demo">hello world<div:after></div:after></div>

If you add overflow: hidden, then all browsers are equally broken: http://jsbin.com/otilux/3

---

So, how to fix it? One option is to use ::before to handle drawing the thing that has filter.

See: http://jsbin.com/otilux/4

That looks the same as it did before in Chrome/Firefox, and now also looks the same in IE9.

Due to using ::after instead of :after, I can see you’re not trying to support IE8. So, another option would be to use an SVG gradient instead of filter.