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.
nice concise!
One bug I discovered in IE7 (might be IE8 too - I haven’t checked yet)-
If you use the transparency filters on a large div, for graying the background like Lightbox, and the dimensions are more than 4000px, it suddenly stops working and the background reverts to opaque. Not that big a deal unless you have a very large screen resolution and/or have a lot of scrolling content.
I found the same issue as Femi, doesn’t work on absolute positioned divs (which have display:none and are shown later with Javascript).
Why is IE always a BLEEP BLEEP!
Seriously though, thanks for the post, I was pulling my hair our over this. I hate CSS sometimes.
Greg / Femi,
Positioning shouldn’t affect this at all - are you sure it’s not that the Javascript shows the div by altering the transparency?
BUT, you do need to swap the stupid quotes Wordpress inserts around the IE8 code for regular double quotes in the CSS snippet posted above for it to work in IE8….
I am also wondering why IE has always an issue when it comes to web designs compared to firefox, different display. Thank you for this post this is such a great help.