Now updated to include opacity/transparency setting for IE8 in strict mode! (Good old Microsoft - making something that was already complicated, that little bit harder…)
It doesn’t validate if you’re using the W3 CSS validator, but it does ensure that whatever element you want to make transparent (or vary the opacity of) using CSS is really transparent in all browser types.
Use the following code:
.invisible {
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=0)”;
filter: alpha(opacity=0);
-khtml-opacity: 0.0;
-moz-opacity: 0.0;
opacity: 0.0;
}
in your stylesheet, and then add class=”invisible” to whichever element you want to make invisible.
If you are only wanting to make the element partially transparent, then the first attribute (filter) take values from 0 to 100, whereas the next three take values from 0.0 to 1.0.
In case you were wondering:
-ms-filter : targets Internet Explorer 8 (and must always come first, before the old ‘filter’)
filter : targets Internet Explorer 7 and below
-khtml-opacity : targets old Safari browsers
-moz-opacity : targets Netscape and Mozille browsers
opacity : targets all those other browsers who work the way that they should (and is therefore valid CSS3 code)
Any idea on how to change opacity in DHTML with JavaScript? In particular, for IE8? Thank you.
Will the use of this code hurt me, SEO wise?
Won’t hurt you SEO wise, unless you’re planning on creating a lot of keyword stuffed divs and making the all invisible
Sadly doesn’t work in my IE 8 when you’re working with absolute positions or hidden divs you want to make visible later using client script.