Css Background Opacity With Rgba Not Working in Ie 8

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

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() not working properly in IE8

rgba is not supported in IE8, for fallback tricks, this might be helpful
http://css-tricks.com/rgba-browser-support/

css opacity not working in IE

opacity does not work on pseudo objects in IE 10,9,8

Try this code:

HTML:

<div></div>

CSS:

div{
width:100px;
height: 100px;
background: blue;

filter:alpha(opacity=30);
-moz-opacity:0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
}

div:after{
content: ' ';
position: absolute;
width:100px;
height: 100px;
left: 200px;
background: blue;

filter:alpha(opacity=30);
-moz-opacity:0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
}

Click to see it in action

What you're supposed to see is two squares both semi transparant. However IE disregards the opacity properties for the pseudo item, and it renders it completely opaqe.

Transparent Background color in IE8

Try something like this:

background: rgba(200, 54, 54, 0.5);

The first three numbers are the red, green and blue values for your background colour, and the fourth is the alpha channel.

The alpha channel works the same way as the opacity value.

For IE 8 which seems to not support rgba you will need a opacity attribute this below should be more cross browser friendly:

.transparent {

/* works for IE 5+. */
filter:alpha(opacity=30);

/* works for IE 8. */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";

/* works for old school versions of the Mozilla browsers like Netscape Navigator. */
-moz-opacity:0.3;

/* This is for old versions of Safari (1.x) with KHTML rendering engine */
-khtml-opacity: 0.3;

/* This is the "most important" one because it's the current standard in CSS. This will work in most versions of Firefox, Safari, and Opera. */
opacity: 0.3;
}

rgba Not Working Correctly in IE10 Compatibility, IE8, or Chrome

I ended up fixing this by adding specific styles for each color's nth-child(odd) selector:

        .blue {
background: #B0C4DE;
}

.green {
background: #a4d5a8;
}
.purple {
background: #ada4d4;
}
.pink {
background: #e3b3e0;
}
.yellow {
background: #e0e3ab;
}

/*Color the odd rows with a lighter shade
maintains zebra stripe while sorting via jQuery*/
tbody tr:nth-child(odd) td.blue{
background: #E6E6FA;
}
tbody tr:nth-child(odd) td.green{
background: #ddf5de;
}
tbody tr:nth-child(odd) td.purple{
background: #c7c6f4;
}
tbody tr:nth-child(odd) td.pink{
background: #fae1fa;
}
tbody tr:nth-child(odd) td.yellow{
background: #f5f8dd;
}

CSS transparent background not working in IE7-8

What's happening here is that the regular background declarations interfere with the filters.

To fix it, add background: none to your inputs in LTE IE8 only, either through a second stylesheet or in the same document but by appending \9 to the declaration.

background: none\9; targets IE8 and below, just like the wildcard hack (*background: none;) which targets IE7 and below, or the underscore hack (_background: none;) which targets IE6 and below. You should however only need to use the first.



Related Topics



Leave a reply



Submit