I’ve been looking into opacity in CSS. All of my initial testing was done in Firefox and worked as expected. Using opacity in CSS is simple enough, accepting values between 1.0 (completely visible) and 0.0 (invisible). As an added bonus it also works in Safari and Opera.
Then I ran into Internet Explorer (IE). IE’s CSS uses filter instead of opacity, and the expected values are different. The filter opacity values range from 100 (completely visible) to 0 (invisible). This turns out to be easy enough to deal with. Here’s an example that sets the opacity to 50%, it works in IE (filter) and others (opacity):
.change_opacity {
opacity: 0.5;
filter: alpha(opacity = 50);
}
But simply setting the filter/opacity value in IE isn’t enough. Turns out that IE requires an element to be positioned in order for filter/opacity to work. If your element doesn’t have a position you can work around this by adding ‘zoom: 1‘ to your CSS. There are other hacks to deal with this, zoom was the one I picked and it seems to work well enough.
In JavaScript you can find out if an element in IE has a position component by checking element.currentStyle.hasLayout. If hasLayout is false then the element has no CSS positioning.
If you want to learn more about this issue here is a reading list to get your started:
UPDATE: Fri 1 Sep 2006 @ 12:45pm Michael correctly pointed out that IE doesn’t use a % for opacity, so I’ve removed it.
September 1st, 2006 at 11:32 am Michael Newton
There’s no %
September 1st, 2006 at 11:47 am joseph
Michael-
You are correct, I’m not sure where I picked the % from. I’ve removed it.
October 31st, 2006 at 12:28 pm arathael
Thanks man, im developing a webapp for my job and i was going quite crazy about this matter. My Css was fine, and worked in FF (as always) but the application has to be cross-browser and i didn’t know was happening here..
I was working before, on an anchor element, and when I nested the anchor within a list item, it stopped working… even with float and block display.
The zoom property seems to be quite a thing…
April 9th, 2007 at 11:38 pm Jeremy
Thanks so much! id been trying to fix this bug for ages, but couldn’t work out why it wouldn’t work in IE!
April 18th, 2007 at 12:03 pm maaaaak
zoom: 1; thank you very much, makes sense in a microsoft sort of way *shrug
May 22nd, 2007 at 7:16 am Ted
Joseph,
I’ve been experimenting with opacity in a js menu over top of an image. As you can see in this webpage, FF works but IE does not. Here’s the line I’m using.
I have eliminated all possibilies except the “position: absolute;” If I remove this, the menu works in both FF/IE but the opacity only works in FF with it.
Any ideas would be greatly helpful.
–Ted
June 4th, 2007 at 7:01 pm trebla
Hi there,
to make it work in IE add width:100%
.change_opacity {
opacity: 0.5;
filter: alpha(opacity = 50);
width: 100%; /* stupid IE */
}
see you
June 24th, 2007 at 4:54 pm danny
genious!!! the ‘zoom:1;’ worked perfectly to give me transparentcy in ie! BUT, my hit counter and ad, lose there ‘position:absolute’ attributes! is there anything else that can be used instead of the zoom feature to get transparentcy to work in ie? or a way of getting my hitcounter and ad to stay on the right of the page?? email me any decent response, please, ninjaprawn@blueyonder.co.uk , or visit my site, my email is there to http://ninjaprawn.myby.co.uk !!!
June 27th, 2007 at 7:59 am Iván
@danny:
I think you can use ‘float: right’.
September 8th, 2007 at 7:30 pm Fei
Even though you posted this a while ago, just wanted to say; thank you so much for the code! Been wondering why the code wasn’t working and then I read your blog, thank you!
September 24th, 2007 at 9:01 pm Torreco
Hi
I’m having a problem with the css in my blog, and I’m wondering if you could help.
I’m using this code to hide the Blogger navbar, but in only works with FF. It isn’t the same with IE or Opera. The goal is that the navbar remains hidden, and become visible when you roll the mouse over it. This is the code:
#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100);width:100%}
As you can see, I read your post and added widht to the code, but doing this way it didn’t worked.
October 17th, 2007 at 11:21 pm Torsten
I have exactly the same problem as Torreco!
IE recognize the string “#navbar-iframe …” and it is displayed transparent. It’s working fine. But IE seem NOT to recognize the string “#navbar-iframe:hover …” because on hovering the navbar - in IE - it not changes anything, it is still so transparent as in “#navbar-iframe …” defined.
So my only thought is, that the problem lies in the string “#navbar-iframe:hover”. Why does firefox recognize it, and IE does not???
October 23rd, 2007 at 3:07 am Rob
The :hover psuedo-class only works in IE6 for A elements. And if #navbar-iframe is actually an iframe, that might be a different bundle of fun again…
You could make your A element act like a DIV via ‘display:block’.
October 30th, 2007 at 7:38 am Torsten
Thanx for the answer. But it doesn’t seem to work. At first I have added the following lines to my stylessheet:
#navbar-iframe {
display:none;
}
but this destroyed my whole blog-formation.
than I added it to the hover-string:
#navbar-iframe:hover { opacity: 0.8; filter: alpha(opacity=80); display:block; }
my blog-formation was there again, but the hover-effect didn’t stil work in IE.
November 17th, 2007 at 12:04 am Phoenix Shadow
Thanks for that. Somedays I just wish everyone could decide to interpret css and html the same way you know? Anyone else ever feel that, or is just me? :)
Torsten:
display: none; will remove the object entirely from the layout where as
visibility: hidden; just means it’s not visible.
Then to make things visible again, you just go:
document.getElementByID(objectID).style.visibility = “visible”;
January 22nd, 2008 at 5:38 pm nahum silva
Hi every body I really Dont know why get angry about IE, get a javascript framework and all this is going to be disappear also you use the reset css of yahoo for make your app easy of use with css…
get http://www.prototypejs.com and yahoo css reset yui…
January 30th, 2008 at 6:57 am Joseph Scott
@nahum -
Expecting people to use Javascript to fix a CSS issue is a sign that there is a problem (or at the very least, significant difference) with your CSS implementation. While the Yahoo CSS reset is nice, it doesn’t really address this particular issue as far as I can tell.
The intent of the post was to provide a reference on how to make CSS opacity work in Firefox and IE.
January 30th, 2008 at 5:17 pm Andreas Wacker
Thanks for “zoom: 1″
What was frustrating is now fixed.
Thank you.
People: 1 - IE: 0
January 31st, 2008 at 10:45 am Joseph Scott
@Andreas Wacker -
No problem, that seemed to be the least intrusive way to deal with the issue that I’d found.
Let’s hope that IE doesn’t start scoring any points against the people :-)
February 20th, 2008 at 1:19 pm Sarah
thanks for the tip. Worked perfectly for me. =*
February 28th, 2008 at 3:39 pm Philip
In IE, I found that if you create an element in JS, it does not grab the CSS property of filter (and probably other attributes). This had me stumped as to why IE did NOT have the opacity value I gave it. Example:
—- THIS DOES NOT WORK IN IE —-
[javascript]
var div = document.createElement(’div’);
div.setAttribute(’class’, ‘partiallyTransparent’);
var body = document.getElementsByTagName(”body”).item(0);
body.appendChild(div);
[/javascript]
[CSS]
.partiallyTransparent {
border: solid 1px #999;
background: #FFF;
color: #000;
opacity: .7;
filter:alpha(opacity=70);
width: 100%;
z-index: 1;
}
[/CSS]
——————————-
If I created the div in the HTML (and not dynamically in the JS), then the opacity worked fine. Example:
—- THIS DOES WORK IN IE —-
[HTML]
Hi, this is some text
[/HTML]
[CSS]
.partiallyTransparent {
border: solid 1px #999;
background: #FFF;
color: #000;
opacity: .7;
filter:alpha(opacity=70);
width: 100%;
z-index: 1;
}
[/CSS]
—————————
Of course, in FF 2.x, the dynamically-generated HTML pulls the CSS attributes just fine. Hope that helps someone because it had me stumped for a few minutes. ;-)
March 6th, 2008 at 8:48 am mediaVinci
Does this work in IE?
.microflop {
opacity: micro$oft(webstandards = 0);
}
graphically & sincerely,
Marc Klein
March 29th, 2008 at 2:26 pm Java2Architect
Philip,
Are you certain the opacity did not get applied in IE when you created the html element dynamically using Javascript because of some different problem with applying class styles in IE?
What I wanted to ask is, I don’t see zoom : 1 in your CSS. Can you confirm if things continue to break in IE even after you put this CSS style and create the html element dynamically using JS?
Fact is, I’m working on something for which I need to absolutely create html elements on the fly and if I can’t change the opacity on them, then I’m screwed.
Thanks much.
April 5th, 2008 at 10:57 am Wilko
@Java2Architect,
The reason Philip’s style didn’t get applied is because a of another wonderful problem with IE. This time its DOM implementation.
It is exactly as Philip says, if you apply the class attribute with the proper DOM method ’setAttribute’, it will not be applied properly. It seems to apply the class attribute properly but not actually set the CSS at runtime.
The way to get arround this is to use the object property ‘className’.
So for Philip’s example change;
var div = document.createElement(’div’);
div.setAttribute(’class’, ‘partiallyTransparent’);
to,
var div = document.createElement(’div’);
div.className = ‘partiallyTransparent’;
That should do the trick. Completely cross-browser too (its nice to be able to say that every now and again) :).
Ciao
April 18th, 2008 at 11:56 am Dan
I’m having a strange problem:
I have a table that I’m fading using “filter” and “opacity” so that it works with both IE and FireFox.
There are anchor tags in my table and are positioned relative (necessary for my roll-over labels). However, I’ve found out that if I have any positioning specified for the anchor tags, they do not fade with the rest of the table. If I omit the positioning in my CSS, then it fades fine (though my roll-over labels no longer work correctly).
It seems the IE no longer considers the anchor tags as children of the table? This is very vexing for me because it only happens with anchors; if I specify positions for img tags, they work fine…
May 7th, 2008 at 4:42 am saly
thanks, salvation for me :-)
May 22nd, 2008 at 3:59 am Amy Mahon
Thanks! This post definitely helped me in a quick pinch.
May 25th, 2008 at 2:40 pm tom
“zoom: 1″ saved me.
Great post, Joseph!
May 28th, 2008 at 12:17 am shruthi
div.fileinputs {
position: relative;
}
div.fakefile {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
input.file {
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}
not working in Fire fox
May 28th, 2008 at 10:39 pm tom
Of course it’s not working, for security reasons. But there are work-arounds to this. Google for:
javascript file upload browse button
and you will find how to hide and style the input type=file
May 28th, 2008 at 10:59 pm shruthi
But if control style is set to display none, then file1.hasFile vil be nothing, i am not able to track how to save the file into server
May 28th, 2008 at 11:23 pm tom
http://csscreator.com/node/29222
http://www.google.com/search?num=50&hl=en&safe=off&q=input+type%3Dfile+style&btnG=Search
I will not comment any more regarding this matter.
July 7th, 2008 at 5:07 pm Andrew
In the code below, I can’t seem to find a way to make the inner div opaque. It seems the opacity can be set to a lower value, but not a higher one.
var oOuterDiv = document.createElement( ‘div’ );
oOuterDiv.style.position = ‘absolute’;
oOuterDiv.style.top = ‘0px’;
oOuterDiv.style.left = ‘0px’;
oOuterDiv.style.width = ‘100%’;
oOuterDiv.style.height = ‘100%’;
oOuterDiv.style.backgroundColor = ‘red’;
oOuterDiv.style.opacity = ‘.5′;
oOuterDiv.style.filter = ‘alpha( opacity=50 )’;
oOuterDiv.style.display = ‘block’;
var oInnerDiv = document.createElement( ‘div’ );
oInnerDiv.style.position = ‘absolute’;
oInnerDiv.style.top = ‘200px’;
oInnerDiv.style.width = ‘200px’;
oInnerDiv.style.height = ‘200px’;
oInnerDiv.style.border = ‘5px solid black’;
oInnerDiv.style.backgroundColor = ‘white’;
oInnerDiv.style.opacity = ‘1′;
oInnerDiv.style.filter = ‘alpha( opacity=100 )’;
oInnerDiv.style.display = ‘block’;
oOuterDiv.appendChild( oInnerDiv );
var oBody = document.getElementsByTagName( ‘body’ )[0];
oBody.appendChild( oOuterDiv );
July 8th, 2008 at 12:05 am tom
You can’t do that. Let me explain this in a few ways - they all mean the same thing, I’m just making sure everyone gets the point:
1) If you have an element INNER inside an element OUTER, you can’t make INNER appear more opaque than OUTER because the opacity you give OUTER will be the opacity used to paint that element and all it’s children.
2) Here are some examples:
- If you give OUTER 25% opacity and INNER 100%, then on the screen INNER will appear to have 25%.
- If you give OUTER 25% opacity and INNER 50%, then on screen INNER will appear to have 12.5%.
3) The opacity is relative to the parent, therefore the final result will be the product of all opacity values starting with the given element and continuing with all of it’s parents (25% * 50% = 12.5% because the “%” sign simply means ” / 100″).
Note: You can NOT have opacity > 100% because that simply doesn’t make sense.
Hope that’s clear…
July 9th, 2008 at 10:30 am Andrew
Hi Tom, thanks for responding. I was able to make this work as expected by adding the inner div to the body as opposed to adding it to the outer div.
In the example I gave above, both FF and IE have the same result. I would submit this is a bug, or at the very least, inconsistent design. There are some style elements that certainly make sense in relation to a parent. Opacity, color, font style, etc… are not among them. These items should vary independent of any parent unless inherit is specified. Said another way, I don’t see how the opacity of a block element with z-index 0, should affect the opacity of an element with a higher z-index positioned above it. These should not depend on each other and should render as such.
Best Regards,
Andrew
July 10th, 2008 at 10:00 am tom
Opacity makes sense, because you don’t “stick” the inner div “on” the outer div. By your logic, you couldn’t make the contents of a div transparent unless you reached EACH AND EVERY element inside it and all their children and gave them the same opacity. Opacity is relative because a div is a container and if you make it transparent, it’s pretty clear you want the contents to have the same transparency, otherwise it wouldn’t make any sense, except for making transparent rectangles.