IE8 gradient filter not working if a background color exists

StackOverflow https://stackoverflow.com/questions/4508191

Question

I'm trying to use the following CSS styles. They are working on most browsers, including ie7. However in ie8, the transparent background does not show and instead I get the background color which I would like to leave set as a fallback color.

section.rgba{
    background-color: #B4B490;
    background-color: rgba(200, 0, 104, 0.4);  
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99B4B490',EndColorStr='#99B4B490');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#99B4B490',EndColorStr='#99B4B490')";
    zoom: 1
}

I would like to be able to get this to work without having to resort to an IE stylesheet where i set the background color to none. Is this possible?

Anybody know how to fix it?

Was it helpful?

Solution

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.

OTHER TIPS

Just adding this as an update - I know the OP got their answer but I found this question while trying to figure out why it (the "fallback") was even "working" in IE7, it confused me no-end so here's what I found out.. it's not working properly in IE6/7...

IE8 is right here, what you're seeing (with the code in the OP) in IE8 is the background color showing through the gradient filter overlay, and as it's the same color that makes the gradient look like it's not working and that all you're getting is the solid color. That's what should happen in all IE's!

IE6 & 7 are incorrectly ignoring the fallback (so it's not really a fallback) and have their transparent background-color because of a bug, purely because the OP has the colors, both hex and RGBa specified using background-color

There are many ways to workaround this.. see: IE Background RGB Bug - and the last comment especially for ways - this workaround would only really be applicable if not using filters/gradients i.e. really using just RGBa (semi-transparent) backgrounds.

If using MS "filter" Gradients to simulate RGBa, The MS filters are stable back to IE5.5 so the reality is that they don't need a fallback and background: none; fed to IE only browsers, to override the fallback required for other browsers (weird huh!) is likely the best solution in the original case - A fallback colour is only necessary for older browser versions of Opera(especially) & Firefox, Safari et al in the case of their gradients/rgba not yet being supported.

It appears, you have to put either width or height to DIV CSS for gradient to work in IE 7+ ( at least I had to )

.widget-header {

    text-align: center;
    font-size: 18px;
    font-weight: normal;
    font-family: Verdana;
    padding: 8px;
    color: #D20074;
    border-bottom: 1px solid #6F6F6F;
    height: 100%;
    /* Mozilla: */
    background: -moz-linear-gradient(top, #FFFFFF, #E2E2E2); 
    /* Chrome, Safari:*/
    background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#E2E2E2));
    /* MSIE */
    filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#E2E2E2');
    /* Opera 11.10 + */
    background-image: -o-linear-gradient(top, #FFFFFF, #E2E2E2);
}

Hope this helps

I found I had to change the <a> element from display:inline to display:block before the filter style would work. Also, the color can be specified with a 4-byte sequence where the first byte is opacity, then rgb, ie. #oorrggbb. Eg.

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffA0C848', endColorstr='#ff70A828');
display:block;

You're using Modernizer wrong. Modernizer places classes on the HTML element; not each individual element. Here's what I used in IE8 to color the SECTION tags.

.rgba section {
    background-color: rgba(200, 0, 104, 0.4);
}
.no-rgba section {
    background-color: #B4B490;
}
.no-cssgradients section {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99B4B490',EndColorStr='#99B4B490');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#99B4B490',EndColorStr='#99B4B490')";
    zoom: 1;
}

The zoom rule is to make sure hasLayout was triggered, your use-case not having a need for it is probably because hasLayout is already being triggered.

regarding the -ms- prefix, according to Microsoft's documentation ( http://msdn.microsoft.com/en-us/library/ms532847(v=vs.85).aspx scroll down to "Downlevel Support and Internet Explorer 4.0 Filters", no anchors I can link to), to target IE8, one should be using the -ms- prefix, to target anything prior to that, one should be using the unprefixed one

#element {  
    background: -moz-linear-gradient(black, white); /* FF 3.6+ */  
    background: -ms-linear-gradient(black, white); /* IE10 */  
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #ffffff)); /* Safari 4+, Chrome 2+ */  
    background: -webkit-linear-gradient(black, white); /* Safari 5.1+, Chrome 10+ */  
    background: -o-linear-gradient(black, white); /* Opera 11.10 */  
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff'); /* IE6 & IE7 */  
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff')"; /* IE8+ */  
    background: linear-gradient(black, white); /* the standard */  
}

The best solution that works for IE7 and IE8 is to use a gradient image and set repeat-x: true while putting it in the background. This works for all browser types that I have found.

you can use the -ms-filter but i guess its the same issue as opacity if you do filter before -ms-filter it fails se more at:

http://www.quirksmode.org/css/opacity.html for that theory

so you need to do like this: 

background-color: #D5D6D7;
background-image: linear-gradient(bottom, rgb(213,214,215) 0%, rgb(251,252,252) 100%);
background-image: -o-linear-gradient(bottom, rgb(213,214,215) 0%, rgb(251,252,252) 100%);
background-image: -moz-linear-gradient(bottom, rgb(213,214,215) 0%, rgb(251,252,252) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(213,214,215) 0%, rgb(251,252,252) 100%);
background-image: -ms-linear-gradient(bottom, rgb(213,214,215) 0%, rgb(251,252,252) 100%);
background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(213,214,215)),
    color-stop(1, rgb(251,252,252))
);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#D5D6D7',EndColorStr='#FBFCFC')";
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D5D6D7', endColorstr='#FBFCFC');

this works for me

besides that you cant have a 8 char hexcode (hex is latin for six) and on top of this you have the same color to gradient between you have to have different colors

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top