Here’s a little fun one that wasted me an hour tonight: Internet Explorer can’t do opacity on DIV elements that don’t have a width. I’m working on some front end UI updates in some of my library code and on one page I noticed that various fade effects where not working on IE 7. Yet on other pages the same code I use works just fine. The code is part of my library which does:

this.setOpacity = function(Percent) {          

      if(_Ctl.filters)

            _Ctl.style.filter = "alpha(opacity='" + (Percent * 100).toFixed() + "')";

      else

            _Ctl.style.opacity = Percent;       

}

This works fine for setting transparency (and yes I realize this might trounce other filters but then I surely don’t plan on using any).

But if you have a control defined like this:

    <div id="divNameResult" class="errordisplay"

         style="display:none;padding:8px"></div>

and you do:

var div = new wwControl("divGenericButtonResult");

div.show(.50);   // calls .setOpacity

it fails to show the opacity.

    <div id="divNameResult" class="errordisplay"

         style="display:none;padding:8px;width:450px"></div>

As soon as I add the width it starts working.

That’s a fun one <s>. I was tearing out my hair wondering WTF this code that’s working perfectly well in other parts of the app was bonking. Not until I actually posted the EXACT control definition from another location did it start working and the only difference happened to be the width.

This is not a big deal from a functionality POV but man how freakign inconsistent can you be? I still don’t understand why the IE team couldn’t at least have supported the .opacity CSS style given that every other browser under the sun by now supports it…