Rgba Not Working in Ie9

CSS background opacity with rgba not working in IE 8

Create a png which is larger than 1x1 pixel (thanks thirtydot), and which matches the transparency of your background.

EDIT : to fall back for IE6+ support, you can specify bkgd chunk for the png, this is a color which will replace the true alpha transparency if it is not supported. You can fix it with gimp eg.

rgba not working in IE9

Well, I found out why. Seems as though "Compatibility View" was enabled so I disabled it and, voila. I probably clicked it by accident when I wanted to click on the refresh button.

color IE fallback for rgba() does not work

RGBA is not supported in IE.

However, as it sees your color: style, it attempts to evaluate it and reverts to the default color (#00000000).
You could use an IE specific hack here, such as

*color: red;

But, assuming that you are trying to affect only the background color, and not the opacity of the entire element, you're best off with a filter that sets the desired rgba value as the start and end color of a gradient - creating an rgba background.

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);

-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);

But remember - IE assumes that the Alpha is first, not last, so don't just convert and copy your values.
The double filter is for IE6 and IE7 respectively.

http://css-tricks.com/rgba-browser-support/

internet explorer 11 rgba refuses to work

apparently IE11 was using IE7 mode as default rendering

using 

<head>
<meta http-equiv="x-ua-compatible" content="IE=edge" />

fixes it :)

RGBa in IE9 not producing the desired result

That does appear to be a bug in IE9 despite the fact that it apparently fully supports rgba() colors.

Option #1 - Hardcode the Colors

As you stated in a comment on another answer, hardcoding the colors is one solution. There are a couple ways you could do that, but here is my recommendation:

If you change the background colors to be applied on a <td> level, hardcoding the background colors will work great and even allows you to keep using alpha. This will allow it to blend with any background colors or images behind the table. One benefit of this method is that you don't have to change your HTML. The downside of this is that you'll have to calculate the new alpha blend manually, which can be a bit troublesome.

CSS:

td.highlighted {
    background: rgba(52,153,207,0.15); 
}

tr.highlighted td {
    background: rgba(255,255,77,0.35);
}

tr.highlighted td.highlighted {
    background: rgba(187, 227, 127, 0.4475);
}

HTML:

<table>
    <tr class="highlighted">
        <td>1928</td>
        <td>Test</td>
        <td class="highlighted">$1,000,000.00</td>
    </tr>       
    <tr>
        <td>1928</td>
        <td>Test</td>
        <td class="highlighted">$1,000,000.00</td>
    </tr>
</table>

Option #2 - Use a <div>

If you don't want to have to hardcode your CSS colors, you can wrap the contents of each potentially highlighted table cell in a <div> that is sized to fit.

I would not recommend this method because it is going to be a bigger pain to maintain in the long run and makes your HTML more complicated. However, if you want to retheme your website, using this method temporarily while you are adjusting colors can make things easier for you if you're limited to IE9.

CSS:

tr.highlighted {
    background: rgba(255,255,77,0.35);
}

td>div {
    width: 100%;
    height: 100%;
    padding: 0;
}

td.highlighted>div {
    background: rgba(52,153,207,0.15); 
}

HTML:

<table>
    <tr class="highlighted">
        <td><div>1928</div></td>
        <td><div>Test</div></td>
        <td class="highlighted"><div>$1,000,000.00</td>
    </tr>
    <tr>
        <td><div>1928</div></td>
        <td><div>Test</div></td>
        <td class="highlighted"><div>$1,000,000.00</div></td>
    </tr>
</table>

rgba() not working in IE8

Simple answer: IE8 does not support RGBA properties. It only knows about RGB.

RGBA support was only added in IE9.

Other very old browsers may also not have support for RGBA. However, there aren't many browsers that old that are still in use other than IE8.

There are some ways you could work around this:

  • Use a polyfill such as CSS3Pie. This will allow you to specify RGBA background colours in your CSS. You still won't be able to use it directly in JS code as you have it, but you could change the class to deal with it.

  • Use a tool like Modernizr to detect whether the browser supports this feature, and provide different functionality if it doesn't.

  • Use IE8's -ms-filter style to achieve the transparency effect. This allows you to set a range of special effects, including opacity. This is a non-standard IE feature, and is replaced by standard CSS in IE9/10, but is still useful for in certain cases for old IE versions.

  • Use a small PNG image with an alpha channel as your background instead. Bit of a shame to be using a background image for a plain colour background these days, but it will achieve the result you're looking for in all browsers.

RGBa ,transparency is working perfectly in all browsers except below IE9 in which it is failing to do so

RGBa is working perfectly in all browsers except below IE9 in which it is failing to do so.

That'll be because IE8 and earlier don't support RGBa.

is there any workaround or is there any other way i could achieve the same result?

  1. Use IE's filter style. I hesitate to recommend this, as there are issues with it that you may have to work around, but it is an option. (the main issue I predict is in IE9 which will try to support the filter and the modern CSS feature, resulting in a clash)

    filter has an opactity feature, but that's not a direct equivalent for RGBa. If you want an actual feature match using filter, you'll need to do it as a filter gradient (albeit a gradient with no colour changes), since that will allow you to include the alpha layer in the colours. See various places on the web for how to do CSS gradients in IE<=8.

  2. Use a polyfill script like CSS3Pie. This will give you pretty seamless support for RGBa background colours in IE8 and earlier. As long as you're happy to have a Javascript library doing the hard work, this is definitely the best option.

  3. Use a PNG image with the appropriate transparency for the background instead of a background colour. The simple and obvious solution. Kinda old-fashioned, and a bit of a shame to throw away the nice shiny CSS RGBa feature just because an obsolete browser doesn't support it, but you can be fairly certain it'll work, doesn't require and JS or hacks, and won't have any unexpected side-effects.

  4. Just give up with trying to support IE8 with this particular thing. Is the transparency really vital to your site or does it just make it look better. Would an IE8 user really notice the difference if you just gave him a solid non-transparent colour? These, of course, are questions that only you can answer about your specific site. If you need it, then you need it and you'll have to use one of the other options, but if you can get away without it for your IE8 users then maybe that's the solution. (it might even help encourage people to upgrade their browsers)

My button's background-color us not working in IE

I can't understand why your background-color working on Firefox.
In my demo, i got error invalid value

background-color: rgb(0, 148, 146, 0.8) !important;

should be changed to

background-color: rgba(0, 148, 146, 0.8) !important;

https://jsfiddle.net/5qbbmx4z/6/

And You should NOT use !important as much as possible.

rgba not working in IE8 how to solve this

You can either use a .png as a background image, or just set a solid color fallback for IE8. The fallback would work like:

.navitem:hover {
    /* solid color fallback */
    background: rgb(100,100,100);
     /* modern browsers */
    background: rgba(255, 255, 255, 0.3);
}

Related Topics

Susy 2.0 Change Columns at Breakpoint

How to Set Bootstrap Col for Small Display Sizes

No Possibility to Select Text Inside <Input> When Parent Is Draggable

CSS: How to Center Box Div Element Directly in Center

Fieldset: Center Legend

Change Styling on Hover Semantic-Ui-React Components

3D-Like Hover Effect on Button

Vue.Js + Webpack Multiple Style Tas Output

Mix-Blend-Mode Doesn't Work on Chrome

Internet Explorer 8 and Checkbox CSS Problem

Centering in CSS, When The Object Is Larger Than The Viewport

CSS: Table and Table-Cell Replacement for Ie7

Cannot Stretch Svg Background Image, Aspect Ratio Will Be Preserved

Angular 2 - Jquery | Adding Styles (Top/Left) with a Mouse Position

Use Full Width Excluding Overflow Scrollbar with "Position: Absolute"

CSS: Gradient Text Colour

How to Keep Bootstrap 3 Navbar as Collapsed for All Screen Sizes

Hidden Characters in CSS


Leave a reply



Submit