CSS Opacity in Internet Explorer (IE)

There’s no %

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…

zoom: 1; thank you very much, makes sense in a microsoft sort of way *shrug

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

@danny:
I think you can use ‘float: right’.

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.

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’.

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”;

@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.

@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 🙂

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. 😉

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.

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…

Thanks! This post definitely helped me in a quick pinch.

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

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

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 );

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

Hi, I tried every trick but none works.
Here is the web page : http://www.ca-alpesprovence.fr/Vitrine/ObjCommun/Fic/AlpesProvence/interconso/

When you roll over the pink words, a bubble appears. Then when you roll over one of the 3 parts of the bubble, the two other should fade out slightly. It works in any browser but IE.

Does anyone know what is wrong with this page ?

Thanks

I have a div defined in my JSP as follows:

css for both is:

#order_left_assaysList{
overflow: hidden;
width:100%;
}

.overlay_div_css{
background:#dedede no-repeat center center;
height: 303px;
width: 450px;
zoom: 1;
position: absolute;
z-index:999;
}

javascript to set the overlay is:

var setOverlayProps = function(rye) {
var elm=dijit.byId(rye);
var dojoMargins = dojo.marginBox(elm.domNode);
_height = dojoMargins.h;
_top = dojoMargins.t;
overlay = document.getElementById(“overlay_div”);
overlay.style.height = _height + “px”;
overlay.style.top = _top + “px”;
overlay.style.filter = “alpha(opacity=50)”;
overlay.style.opacity = “.5”;
};

I can see the div being created but has the lower div completely blocked, the opacity is not being set and I can’t figure out what am I doing wrong.

@Stéphane (40) –

When I look at the pink bubbles in Firebug I don’t see the filter attribute being set, only the opacity value.

Having read every ones comment I don’t think anyone has described this. But I am hoping someone one knows what is going on.

I have a custom input (file).
The input has 0 opacity (so I can make it look custom).
There is a div behind it and a span over it.

The input is in an iframe.
When I change the opacity of the iframe the opacity of the input breaks. Basically anything behind it disappears. So with the input at 0 opacity all I get is a blank spot where the input would go.

Input works fine if I don’t change the iframe.
And everything works fine in firefox.

Any ideas?

Sorry, I have already made the custom input box.

My problem is when I change the opacity of the iframe (which has the input in it) breaks the input box. I will set up a demo when go home.

Actually, the following worked for me on IE7 on XP SP2:

div {
filter:alpha(opacity=50);
opacity: 0.5;
width:100%;
z-index:1;
}

abc
The ul was 50% opaque, but only after I got one of those yellow warning bars, telling me that the page is trying to run some form of scripting (apparently, in IE7 CSS = scripting … only the gods know why) because the file was created locally. I had to click it and allow the page to run the “active content.”

You could try to open this file: http://pet.shop.tm/opacity.php
It’s just a HTML file and hopefully it will be available when you open it 🙂
I will keep it up for only a few weeks, then I will probably take it down when I’ll clean up my web server again. If the page isn’t opening, try again later because my server may be turned off (atm experiencing a lot of power failures) or the hostname may not have updated (using dynamic ip and free DNS services from afraid.org which have quite a big timeout, unfortunately).

Thank you very very much!

Hi there,

i have a similar problem with css opacity in IE. Please have a look at the following site:

http://www.lcdhype.de.vu/stuff/iebug

As you can see, IE displays the picture with random white pixels. Those pixels are not stored in the picture and those pixels are displayed as soon as you add the css filter attribute to the img tag. This is a massive bug and i reported it to m$ already but got no response yet.

All your solutions with zoom, z-index and width won’t work here. My solution: add style=”width:%px” to the img tag where % is the actuall width of the img + 1. You may add a surrounding layer with the actual with of the picture and overflow:hidden when the additional pixel bugs you.

I hope this will help because i have spent so much time figuring this out.

“It is not at all clear to me why “You can NOT have opacity > 100% because that simply doesn’t make sense.””
Think in physics:
Transparency 100% = opacity 0% = all the light goes through the object;
Transparency 0% = opacity 100% = all the light is reflected by the object;
So, if you try to have opacity 100%, the object should reflect more light than it’s actually receiving, which is nonsense because there is no other light reaching it except for the one … reaching it. At opacity = 100%, the object reflects all the light and lets you see it in the clearest way possible.

Think logic:
If the object is completely transparent (opacity = 0%) and you can see everything through it as if it wasn’t there, how much clearer could you see through it?
If the object is completely opaque (opacity = 100%), how much more opaque could it be?

Think programatic:
As a web browser, if you have to draw a pixel with opacity = 0%, you don’t display it at all, because it’s completely transparent and you want the user to see whatever was there first (behind it).
If you have to draw a pixel with opacity = 50%, you would make an average of the RGB defining that pixel and the one that was previously there (or usually the white background of the page, if there wasn’t anything) and plot the result.
If you have to draw a pixel with opacity = 100%, you just do it, overwriting whatever was before it.

Blending is done mathematically, something along the lines of:
actualR = newR * opacity + oldR * (1 – opacity)
actualG = newG * opacity + oldG * (1 – opacity)
actualB = newB * opacity + oldB * (1 – opacity)
So you have the old pixel that was at that position defined by (oldR, oldG, oldB), the new pixel (newR, newG, newB) and what you’re actually going to draw on the screen: (actualR, actualG, actualB).
Because of the way the computer screen is designed, every R/G/B pixel has to receive a value, usually between 0 and 255, where 0 = darkest, don’t light at all and 255 = lightest, light at full power. Now, consider that you have a black pixel defined by (0, 0, 0) at a given position and over it you have to draw a white pixel defined by (255, 255, 255) which has opacity 1.5 (that’s 150%). Here’s what you get:
actualR = actualG = actualB = 255 * 1.5 = 382.5
How can you tell that pixel to light up at 382.5 when the brightest it can achieve is 255?

In conclusion, opacity = 0% and opacity = 100% are physical limitations which also have effect in various other ways – logic, programatic and electronic. Any value outside the [0..1] bounds is an error, a fallacy, an illogical result of some bad computations. You are right, DirectX and OpenGL may easily implement their own error-fixing or error-ignoring (not sure about it, but it would be stupid to have something crash because of a tiny overflow of 0.0001) but the fact that you could send your video card a value of 1.5 for opacity doesn’t mean that it makes sense and you always have to think inside those bounds.

Let me know if it’s still not clear.

@Tom: Sorry, but I stand by what I said, although perhaps I could’ve been clearer:

“The way I see it, if a value > 100% is computed as the total opacity of an element, then surely the value used to compute its colour should be clipped at 100, while the value *inherited by its children* should remain > 100.”

So, the final computed opacity of an element would be limited 0-100%, but it would still be possible to define a relationship whereby a child was more opaque than its parent.

I just confirmed for myself that making a diffuse material colour > 1 in a colour channel in fixed function OpenGL lighting causes ‘more than 100% reflection’. This is calculations in a computer, not physics; conservation of energy need not apply if we don’t wish it to :).

To quote the OpenGL “Red Book”:
“For the versions of glColor*() that accept floating-point data types, the values should *typically* range between 0.0 and 1.0, the minimum and maximum values that can be stored in the framebuffer……

“Neither floating-point nor signed-integer values are clamped to the range [0,1] before updating the current color or current lighting material parameters. After lighting calculations, resulting color values outside the range [0,1] are clamped to the range [0,1] before they are interpolated or written into a color buffer. Even if lighting is disabled, the color components are clamped before rasterization.”
http://www.glprogramming.com/red/chapter04.html

To take a non-hypothetical CSS example: I have a menu which I want to overlay on a header, with opacity. This works and I’m happy with how it looks. I then want to add drop-down menus, but I find that if they have low opacity, they become illegible as they blend with the page content. So I wish to apply >1 opacity so that the drop-downs are more opaque than their parents. Tough, I can’t. Oh well; I’ll have to make another plan.

So, internal values used for calculation can be out of bounds, but the final value used in output is clipped: Let me know if it’s still not clear, or if you think I’m mistaken.

@Tom

Thanks for your reply. I throught i solved it with my method but i have white pixels again now T_T and reencoding of the picture in any way is not working because those pixels are there whatever i try to do (they are some times here and sometimes there, the location changes but it wont go away). the gif format is the only format where ie does not show the white pixel bug but i cannot save my pics as gif due to color los and therefore ugly gradients.

As far as I can see, nobody has mentioned M$’s alpha filter breaking if the page is longer than 2048px in IE7 (possibly other IE versions as well). Many have commented that this is due to Vista, XP, graphic cards, drivers etc etc, all not true! M$ sucks at programming and gets most things wrong basically charging for customers to be beta testers for their next product .

There is no way around the breaking alpha filter except to progmatically limit the size of the element that the filter is to be used on to 2048px high (or for everyone to use Firefox who implement opacity in CSS).

Writing this I have suddenly realised how much I wish M$ IE would just go away as most standards compliant code has to be hacked to work the same in IE!

I’m using posion: relative, with “zoom:1” works perfectly ! Thanks!

It’s an old post, but since I found it someone else will also – the ‘filter’ code seems to break the id/anchor links in ie7 (that’s where I am seeing the problem.)
The area is in an overflow hidden area with named anchor text and the text doesn’t move when the filter is part of the css for that text area. Otherwise it’s fine.

So if you have opacity filter and your anchor id/text do not move, try turning off the opacity.

we can use,

opacity: 0.5;
-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”;
filter: alpha(opacity=50);

for all browsers.

Thanks. It really makes sense, that at least we can get the same effect on IE with few lines of changes. IE8 is not that bad. Personally the only change I make is removing rgba stuff, transitions, vendor-specific stuff and this opacity thing.
Thanks for the nice writing.

Thank you, thank you, thank you! I had to remove the filter though. But using visibility instead of opacity works perfect in IE, while maintaining opacity in other (functional) browsers. Saved my day!

Hello!

Need your help…

Here is my code (i put it on codepen for easiest way to check it): http://codepen.io/JohnnyJuarez/pen/zHxaG

Everything works properly everywhere exept IE…actualy, I have IE11…
When I press and hold the button (Registration or OK) – it’s disappear…

I left every code i had used (just commented it by /* */), so youi can see that i had tried everything 🙁