Search code examples
internet-explorer-8filtercssgradientrgba

IE8 gradient filter not working if a background color exists

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?

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.