Ie 8. Gradient Background+Image

IE 8. Gradient background+image

I found the answer to my question:

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#FFFFFF", endColorstr="#EFCA11",GradientType=0 ), progid:DXImageTransform.Microsoft.AlphaImageLoader(src="gxt/images/my/eye.png"); 

Internet Explorer 8 shows gradient instead of background image

Your .png image needs to have larger dimensions, at minimum 1x2 instead of 1x1.

See: http://nemesisdesign.net/blog/coding/ie8-1x1px-semi-transparent-background-bug/

Internet Explorer 8 doesn't perform
the repeat of a 1x1 pixel
semi-transparent background image
correctly when any other element on
the page is using the "-ms-filter"
drective for the alpha transparency.

Background image not showing IE8

CSS3 multiple background isn't supported by IE 8 and below. So the comma separated background value it's invalid thus will not work.

And it does not work on IE9, even when it support multiple backgrounds (buggy but it does) because IE9 does NOT support CSS3 Gradient so again it makes entire declaration invalid.

I suggest you use !important on the multiple background declarations but make a single background declaration as last in the line, so IE9 and below can display at least one of the BG's:

background: url('/images/cartWhite.png') 18px 11px no-repeat, -ms-linear-gradient(top,#74c163,#1d7a09) !important;
background: url('/images/cartWhite.png') 18px 11px no-repeat, -moz-linear-gradient(top,#74c163,#1d7a09) !important;
background: url('/images/cartWhite.png') 18px 11px no-repeat, -webkit-linear-gradient(top,#74c163,#1d7a09) !important;
background: url('/images/cartWhite.png') 18px 11px no-repeat, linear- gradient(top,#74c163,#1d7a09) !important;
background: url('/images/cartWhite.png') 18px 11px no-repeat; /* for IE9 and below */

---

As another option, you could use CSS3Pie. Example:

#myElement {
    behavior: url(http://path/to/pie/PIE.htc);
    background: url(bg-image.png) no-repeat #CCC; /*non-CSS3 browsers will use this*/
    background: url(bg-image.png) no-repeat, -webkit-gradient(linear, 0 0, 0 100%, from(#CCC) to(#EEE)); /*old webkit*/
    background: url(bg-image.png) no-repeat, -webkit-linear-gradient(#CCC, #EEE); /*new webkit*/
    background: url(bg-image.png) no-repeat, -moz-linear-gradient(#CCC, #EEE); /*gecko*/
    background: url(bg-image.png) no-repeat, -ms-linear-gradient(#CCC, #EEE); /*IE10 preview*/
    background: url(bg-image.png) no-repeat, -o-linear-gradient(#CCC, #EEE); /*opera 11.10+*/
    background: url(bg-image.png) no-repeat, linear-gradient(#CCC, #EEE); /*future CSS3 browsers*/
    -pie-background: url(bg-image.png) no-repeat, linear-gradient(#CCC, #EEE); /*PIE*/
}

Keep in mind it will only work if url of behavior is on the same domain. Read more.

Backround image with linear gradient not showing up in ie8

Unfortunately non of the above worked. What I ended up doing was adding the following to an IE8-only css file.

background: url(../../../../modules/contrib/panels/panels_ipe/images/icon-close.png) no-repeat #666666;

I consider this a much worst approach than both 2 suggested above, but since I coundn't make them work I will mark this as an answer. I am open to suggestions if someone considers the answer misleading :)

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

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

Gradient support for IE 8 and below

The filter stuff is generally regarded as bad practice, and isn't valid CSS (so your stylesheet will fail validation tests)

it's possible to set a background image for the element in question, then IE will fallback to that image if it's a version that doesn't support gradients, the beauty of it is that browsers supporting gradients don't load the background image (well, usually) so performance isn't impacted negatively.

Personally, if I were you I'd go for the background image solution, it's a lot cleaner than the whole "filter" thing, and doesn't punish people not using Internet Explorer (yay!)

If you'd like more detail, see here:
http://css-tricks.com/css3-gradients/

---

Related Topics