Rick Strahl's Web Log

Wind, waves, code and everything in between...
ASP.NET • C# • HTML5 • JavaScript • AngularJs
Contact   •   Articles   •   Products   •   Support   •   Search
Ad-free experience sponsored by:
ASPOSE - the market leader of .NET and Java APIs for file formats – natively work with DOCX, XLSX, PPT, PDF, images and more

IE Opacity and DIV tags with no width


:P
On this page:

 

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…

Posted in Ajax  JavaScript  

The Voices of Reason


 

Steve
January 19, 2007

# re: IE Opacity and DIV tags with no width

Show your love by using Firefox :)

Atanas Korchev
January 19, 2007

# re: IE Opacity and DIV tags with no width

I think this is another quirk caused by the "hasLayout" feature of IE. Sometimes things simply don't work in IE because the element you are dealing with does not have a "layout". More info on that matter (and some workarounds) can be found here:
http://www.satzansatz.de/cssd/onhavinglayout.html

Peter Mescalchin
January 19, 2007

# re: IE Opacity and DIV tags with no width

I have to say, the more I use IE7 for testing new XHTML/CSS layouts I develop the less I am impressed with it. Honestly fixes to the rendering engine that I can note between IE6 and 7 are few and far between - and in most cases the same bugs creep through - such as the classic peek-a-boo bugs - which mean resorting to classic "height:1%" additions to my style sheets.

I guess its not big deal since there is still a big requirement to support IE6, but I seriously would have expected a better improvement in the CSS area than what has been delivered. To me, IE7 is just IE6 with some cheesy interface UI redesigns and tabs. I certainly won't become my default browser anytime soon.

Captain Redbeard
February 03, 2007

# re: IE Opacity and DIV tags with no width

Thank you SO much for this! I was banging my head on the desk over this one, and I found your solution (I should have thought of that too). Good job and thanks for the tip.

Kat
February 19, 2007

# re: IE Opacity and DIV tags with no width

You can also use zoom:100% (not valid, I know) instead of a height or width definition.

Holf
May 17, 2007

# re: IE Opacity and DIV tags with no width

Well now, isn't it lucky for me that I came across this article within three minutes of having the same issue? God knows how long I would've spent trying to sort this out before accidentally stumbling across setting the width.

So, that's yet another little browser specific factlet to store away among the hundreds of others which are jostling for space in my brain.

We can only hope that this issue (along with one or two others I could mention!) gets sorted out in an IE7 update.

Thanks very much, Rick, for saving me hours of frustration.

# DotNetSlackers: IE Opacity and DIV tags with no width


Scott
August 15, 2007

# re: IE Opacity and DIV tags with no width

Holf, this is a bug that is new with IE 7. This worked fine in IE 6.

Ricardo Santos
November 12, 2007

# re: IE Opacity and DIV tags with no width

Thank you!!!
You can't imagine what a headache till I find your post.
Thank you very much! :)

Ashley Flynn
January 16, 2008

# re: IE Opacity and DIV tags with no width

Absolute leg-end, now if we can just get rid of 'style.filter' ?

juaniquillo
January 28, 2008

# re: IE Opacity and DIV tags with no width

I can't thank you enough for this. I was driving me crazy...

Daniel Boucher
August 19, 2008

# re: IE Opacity and DIV tags with no width

Sweet mother of Perle! I've been struggling with this for over an hour. Thanks!

Jerry Wright
November 08, 2008

# re: IE Opacity and DIV tags with no width

And another one, you saved me me, 20 minutes in - I've been going mental.

MikeMax
February 09, 2009

# re: IE Opacity and DIV tags with no width

Thank you for posting this!

dondon
June 16, 2009

# re: IE Opacity and DIV tags with no width

I'm in total agreement that IE sucks for not supporting standard opacity proprty styles, especially the CSS3 code. But, to update this thread, now IE8 has REALLY GONE CRAZY! They tell us we'd better use:
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
and they STILL are non-standards-compliant! Could they suck any worse!??????

T-Dog
November 27, 2009

# re: IE Opacity and DIV tags with no width

Thank You!!! I wasted 4 effin' hours on this argh! Thanks again...

West Wind  © Rick Strahl, West Wind Technologies, 2005 - 2020