0

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.

shi69
  • 93
  • 1
  • 2
  • 7
  • add pie.js from this sitehttp://css3pie.com/download/ – Falguni Panchal Aug 12 '13 at 13:13
  • @Fags PIE.htc is enough. – Praveen Aug 12 '13 at 13:15
  • Why don't you use filter: progid:DXImageTransform.Microsoft.gradient ? – daniel__ Aug 12 '13 at 13:16
  • @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 Aug 12 '13 at 13:23
  • @Spudley well, I have experienced terrible performance issues with pie. Anyway, my opinion is just set a solid color and remove round-corners when the browser is IE 7/8. Clean and simple. – daniel__ Aug 12 '13 at 13:35
  • 1
    @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 Aug 12 '13 at 13:50

1 Answers1

0
-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.

Community
  • 1
  • 1
Praveen
  • 55,303
  • 33
  • 133
  • 164
  • actually `-ms-behavior` ought to work for IE8. It won't work for IE6/7, but the OP didn't ask about them. – Spudley Aug 12 '13 at 13:24