Internet Explorer 8 Shows Gradient Instead of Background Image

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.

IE8 gradient filter not working if a background color exists

After glancing over at CSS3please I realized I was doing overkill with my IE7/IE8 gradient styles. Simply using the following style does the job:

filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999');

Apparently, there is no need for the -ms-filter and zoom rules.

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.

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"); 

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/

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 :)

Internet Explorer 8 displays a black to grey gradient instead of a trasnparent png

I found a solution: the transparent image was a 1x1px image on repeat, which for some reason soemtimes caused that error in IE8. I replaced it for a 10x10 pixels version and now it displays correctly.

background image showing fine except in IE8

Both the 'home' and the 'info' page do not have a <div class='footer'> inside the <div class='container'>. For the other pages, this footer class on the last div has a clear: both specified. Which ensures the container div has a height. On the 'info' and 'home' pages, the container div does not have a height. An easy fix would be to add the footer to both pages? If that's not possible. Add 'clear: both' to the css class of the last div inside the container div.

Bad pixel background image in IE 8

I believe this is an issue with using the MSIE alpha filters with PNGs that possess alpha transparency themselves.

Your options are to:

• bake the transparency into the image itself with an alpha channel
• give the icons an opaque background that blends into the context
• give the icons a transparent background gradient by using the MSIE gradient filter

I would choose the third for flexibility, but the first is probably the fastest.

---

Related Topics