CODEWITHSUNDEEP
htmlinternet-explorer
R R
R R

Reputation: 2956

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

I have the following code in which i am using RGBa ,transparency is working perfectly in all browsers except below IE9 in which it is failing to do so.

so how to remove this IE issue ,is there any workaround or is there any other way i could achieve the same result which the below code is doing?

Thanks !

<table  class="popup" style="width:99%; background: rgba(160,160,160,0.6);

--------------------------------------------------------------------------------------^

font-size:12px;left:1%;border-bottom:1px solid #482C1F !important; 
text-align: left;<?php echo $top ?>position:absolute;float: left;" 
id="nameFieldPopup" border="0" cellpadding="10" cellspacing="0">


 <tr>
  <td align="left" style=" padding-left:35%;padding-right:10%; 
   padding-top:10%; " id="detailstd">
    <div id="enps" 
     style="background-color:#b0c4de;
     height: 240px;width: 58%;padding-top:10px;padding-left: 5%;padding-right: 5%;">
     <?php echo $enptext ?>
    </div>
  </td>
 </tr>
 <tr>
  <td align="right"></td>
 </tr>
</table>

Upvotes: 0

Views: 66

Answers (3)

Spudley
Spudley

Reputation: 168853

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)

Upvotes: 3

Igl3
Igl3

Reputation: 5108

IE8 and earlier use filter:alpha(opacity=x).

The x can take a value from 0 - 100. A lower value makes the element more transparent.

Try this ;)

Upvotes: 1

kevpoccs
kevpoccs

Reputation: 635

as @caramba says, rgba value for background is not compatible with a 1x1 png in background you can fix the issue 

background : url('./images/myPerfectPixel.png'); 
background-repeat : repeat;

Upvotes: 1

Related Questions