PIE is not getting applied on button in IE8

Question

I am using CSS3 PIE for rounded corners and gradient background for anchor button on IE7/8. ON IE8, PIE is getting applied only for rounded corners but gradient color is not coming, only button with 1px rounded border corner is rendering. And i am facing this issue only if i use this button in modals.

a.button {
    border: 1px solid #238cbf;
    cursor: pointer;
    background-color: #3a98c4;
    background-image: -webkit-gradient(linear, top, bottom, from(#3a98c4), to(#047ab8));

    background-image: -webkit-linear-gradient( top, #3a98c4, #047ab8); 
    background-image:    -moz-linear-gradient( top, #3a98c4, #047ab8);
    background-image:     -ms-linear-gradient( top, #3a98c4, #047ab8); 

    border-radius: 4px; /* Opera 10.5,
    box-shadow: 0 1px 1px #444; /* Opera 10.5, IE9, FF4+, Chrome 10+ */
    color: #fff;
    font-size: 12px;
    display: inline-block;

}

a.button {
    -pie-background: linear-gradient(#3a98c4, #047ab8); 
    -ms-behavior: url(/pie/PIE.htc);
}

i tried applying position:relative and z-index but did not helped any.

Why don't you use filter: progid:DXImageTransform.Microsoft.gradient ? — daniel__
@loops - there are good reasons for using Pie instead of filter. Filter gradients have bugs that don't occur with PIE. They also don't work properly with IE9. Plus they allow you to use standard syntax, which makes things a lot easier to work with. And of course, PIE gives you other features like border-radius. If you're using it for that, you may as well use it for gradients as well. — Spudley
@loops - that's fair enough. There are good reasons not to use it too :-) PIE does slow things down if you use it a lot; that applies to all polyfills of course. I've not had too many issues with it on that score, but then I do try to use it as sparingly as possible. I would to agree about dropping rounded corners for IE8. By the same token, you could just set a solid background for IE8 too; that's what I'd do in most cases. They're all valid solutions. — Spudley

Praveen Praveen · Accepted Answer · 2013-08-12T13:19:26

-ms-behavior: url(/pie/PIE.htc);

The above is wrong.

Rather try below.

behavior: url(/pie/PIE.htc);

Add it to a.button along with other properties.

If still the problem exists, have a look at this answer.

This may be helpful.

PIE is not getting applied on button in IE8

1 Answers