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
Repeat Table Headers in Print Mode
Svg Use Element and :Hover Style
How to Select an Nth Child Without Knowing the Parent Element
Css to Prevent Child Element from Inheriting Parent Styles
How to Center an Inline-Block Element and If So, How
Float:Right Reverses Order of Spans
CSS Endless Rotation Animation
Webkit Bug with ':Hover' and Multiple Adjacent-Sibling Selectors
Why Specify @Charset "Utf-8"; in Your CSS File
What Has Bigger Priority: Opacity or Z-Index in Browsers
Css Properties: Display Vs. Visibility
How to Animate a Radial-Gradient Using Css
Css 3D Transform Doesn't Work If Perspective Is Set in the End of Property
Css to Make an Empty Cell'S Border Appear
Height:100% VS Min-Height:100%
Prevent That a Fixed Element Resizes When Zooming on Touchscreen