CSS3Pie doesn't apply, instead border disappears

Question

I'm trying to get CSS3Pie to apply to a div. I need rounded corners (border included) and a linear gradient for the background. I got it working with another DIV that I just needed rounded corners, but when I apply the behavior htc to this div all that happens is the border disappears. Any easy way to fix this?

Demo

.productBoxes {
    position: relative;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    background: #efefef; /* Old browsers */
    background: -moz-linear-gradient(top,  #efefef 0%, #efefef 3%, #e6e6e6 6%, #dbdbdb 13%, #d9d9d9 15%, #d4d4d4 17%, #cccccc 28%, #c7c7c7 49%, #c7c7c7 84%, #b8b8b8 92%, #b0b0b0 95%, #b0b0b0 96%, #adadad 96%, #ababab 98%, #a5a5a5 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#efefef), color-stop(3%,#efefef), color-stop(6%,#e6e6e6), color-stop(13%,#dbdbdb), color-stop(15%,#d9d9d9), color-stop(17%,#d4d4d4), color-stop(28%,#cccccc), color-stop(49%,#c7c7c7), color-stop(84%,#c7c7c7), color-stop(92%,#b8b8b8), color-stop(95%,#b0b0b0), color-stop(96%,#b0b0b0), color-stop(96%,#adadad), color-stop(98%,#ababab), color-stop(100%,#a5a5a5)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #efefef 0%,#efefef 3%,#e6e6e6 6%,#dbdbdb 13%,#d9d9d9 15%,#d4d4d4 17%,#cccccc 28%,#c7c7c7 49%,#c7c7c7 84%,#b8b8b8 92%,#b0b0b0 95%,#b0b0b0 96%,#adadad 96%,#ababab 98%,#a5a5a5 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #efefef 0%,#efefef 3%,#e6e6e6 6%,#dbdbdb 13%,#d9d9d9 15%,#d4d4d4 17%,#cccccc 28%,#c7c7c7 49%,#c7c7c7 84%,#b8b8b8 92%,#b0b0b0 95%,#b0b0b0 96%,#adadad 96%,#ababab 98%,#a5a5a5 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #efefef 0%,#efefef 3%,#e6e6e6 6%,#dbdbdb 13%,#d9d9d9 15%,#d4d4d4 17%,#cccccc 28%,#c7c7c7 49%,#c7c7c7 84%,#b8b8b8 92%,#b0b0b0 95%,#b0b0b0 96%,#adadad 96%,#ababab 98%,#a5a5a5 100%); /* IE10+ */
    background: linear-gradient(top,  #efefef 0%,#efefef 3%,#e6e6e6 6%,#dbdbdb 13%,#d9d9d9 15%,#d4d4d4 17%,#cccccc 28%,#c7c7c7 49%,#c7c7c7 84%,#b8b8b8 92%,#b0b0b0 95%,#b0b0b0 96%,#adadad 96%,#ababab 98%,#a5a5a5 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#a5a5a5',GradientType=0 ); /* IE6-9 */    
    width: 100%;
    padding: 0px;
    margin: 0px;
    margin-bottom: 1%;
    border: 1px solid black;
    overflow: hidden;
    behavior: url(/PIE.htc);
}

Can you make a fiddle? BTW, no need for `-webkit-border-radius`, and PIE can give you a linear gradient - `-pie-background: linear-gradient...` (and remove the filter). — Inkbug, Jul 18 '12 at 08:15
How would I do that with a .htc? I don't believe I can access those from external servers can I? — Lethjakman, Jul 18 '12 at 18:02
I'm not sure how much you know about CSS3Pie but do you see the behavior: url(/PIE.htc); That is a IE only file that gets downloaded from the server in order to render the page correctly the page in IE. I can load most of it in jsfiddle, but I don't think that portion of the service will work. — Lethjakman, Jul 18 '12 at 19:13

score 0 · Answer 1 · answered Jul 18 '12 at 08:10

0

Try adding zoom:1 to the element and give it a z-index

answered Jul 18 '12 at 08:10

Ahmad Alfy

13,107
6
65
99

I tried your suggestion, it doesn't seem to fix it though. I shouldn't need a z-index if it's relative should I? – Lethjakman Jul 18 '12 at 19:20
@Lethjakman We try to invoke the `hasLayout` property using the `z-index` and `zoom` ... Will it be affected if you gave it `position:relative;` ? @Uuid I am glad it worked for you. – Ahmad Alfy Feb 07 '13 at 09:28

CSS3Pie doesn't apply, instead border disappears

1 Answers1