IE 8 strict mode and CSS opacity… Work Around

July 15th, 2008 by Nikhil

Oh Well! In the earlier post a few days back regarding Opacity in IE8 ,I forgot to mention an important point that “IE 8 strict mode doesn’t allow for CSS opacity“.
For those who donot understand what I mean by strict mode , here is quick tutorial.

A work around to this (Before IE dev team realise that they have paved way for re-work routines all over the world, for web-sites using Pop-up lightboxes with some opacity, and put back support for OPACITY) is to use a semi transparent image …preferably in PNG format (I have had bad experience getting transparent GIF images to work as they were supposed to). Create a PNG image of the color and percentage of transparency you like , in you favourite image editor and use it as a background image for your lightbox overlay.

i.e.
Instead of something like this

.lighbox_overlay{
background-color: #ffffff;
z-index:1001;
-moz-opacity: 0.6;
opacity:.60;
filter: alpha(opacity=60);
}

Do this….

.lighbox_overlay{
background:url(bkg.png) repeat;
}

TO TRY IT, CLICK HERE! | TO DOWNLOAD, CLICK HERE!

Tags: , , ,


get ExpressingIT News by Email Subscribe to ExpressingIT by Email |  Follow Me on Twitter


One Response to “IE 8 strict mode and CSS opacity… Work Around”

  1. Skry Says:

    Thanks loads for this suggestion! I had tried several more elegant fixes using filters and the like, but as usual IE requires the brute-force approach.

    I have now updated two websites and checked them in IE8, IE9, FF and Chrome – all working grand! Thanks for the help dude :D


Leave a Reply

 Subscribe to ExpressingIT RSS
get ExpressingIT News by Email Subscribe to ExpressingIT by Email
 Follow Me on Twitter