Border radius, background image, background gradient, and IE8, IE10

Question

I've got a div with border radius, background gradient, and background image working in FireFox, but not in IE8 or IE10. Gradient and background image work in IE8, but when I apply the border radius, the border disappears.

.add-to-carttest {
border: 1px solid #004f9e;
padding: 5px 5px 5px 50px;
width:100px;
height: 40px;
font-weight:bold;
background: url(https://www.storesmart.com/mm5/graphics/00000001/add-to-cart-plus.png) no-repeat, -webkit-gradient(linear, 0 0, 0 bottom, from(#e1f0ff), to(#73b9ff));
background: url(https://www.storesmart.com/mm5/graphics/00000001/add-to-cart-plus.png) no-repeat, -webkit-linear-gradient(#e1f0ff, #73b9ff);
background: url(https://www.storesmart.com/mm5/graphics/00000001/add-to-cart-plus.png) no-repeat, -ms-linear-gradient(#e1f0ff, #73b9ff);
background: url(https://www.storesmart.com/mm5/graphics/00000001/add-to-cart-plus.png) no-repeat, -o-linear-gradient(#e1f0ff, #73b9ff);
background: url(https://www.storesmart.com/mm5/graphics/00000001/add-to-cart-plus.png) no-repeat, linear-gradient(#e1f0ff, #73b9ff);
background: url(https://www.storesmart.com/mm5/graphics/00000001/add-to-cart-plus.png) no-repeat, linear-gradient(#e1f0ff, #73b9ff);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
behavior: url(../../Graphics/PIE/PIE.htc);
position:relative;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#e1f0ff", endColorstr="#73b9ff",GradientType=0 ), progid:DXImageTransform.Microsoft.AlphaImageLoader(src="https://www.storesmart.com/mm5/graphics/00000001/add-to-cart-plus.png");}

Also, how do I integrate background image positioning into this? I inserted it between "no-repeat" and "-webkit etc" on all those lines, and it works in FF and IE10, but in IE8, the image isn't positioned. — Reenie Feingold

fnostro fnostro · Accepted Answer · 2013-05-10T17:49:17

border-radius is not available in IE8

http://www.quirksmode.org/css/backgrounds-borders/

oops - just noticed your behavior entry...may want to double check your path

Ok here is what I've come up with:

CSS:

.common
{
    width: 100px;
    height: 40px;
    border: 1px solid #004f9e;
    padding: 5px 5px 5px 50px;
    margin: 0px;
    font-weight: bold;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    !behavior: url(../../Graphics/PIE/PIE.htc);
    position: relative;
    border-collapse:collapse;
}

.add-to-carttest
{
    background-image: url('https://www.storesmart.com/mm5/graphics/00000001/add-to-cart-plus.png');
    background-position:20px 20px;
    background-repeat:no-repeat;
    background-attachment:fixed;
    top:-6px;
    left:-51px;
}

.gradient
{
    background: -moz-linear-gradient(#e1f0ff, #73b9ff); 
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#e1f0ff), to(#73b9ff));
    background: -webkit-linear-gradient(#e1f0ff, #73b9ff);
    background: -ms-linear-gradient(#e1f0ff, #73b9ff);
    background: -o-linear-gradient(#e1f0ff, #73b9ff);
    background: linear-gradient( #e1f0ff, #73b9ff);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e1f0ff', endColorstr='#73b9ff',GradientType=0 );
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#e1f0ff', endColorstr='#73b9ff',GradientType=0 )";
}

HTML:

<div class="common gradient">
    <div class="common add-to-carttest"></div>
</div>

It seems the gradient filter in IE8 overrides and hides or repositions the background image because it seems the gradient itself is rendered as an image. So I broke apart the css and nested the divs. Then repositioned the inner div to overlay the outer. That seems to work, not elegant, but compatible.

Also, positioning via "bottom left" syntax only seems to work in newer browsers so I positioned the background image by pixel position

Hope this helps

Border radius, background image, background gradient, and IE8, IE10

1 Answers