I have opacity working in ALL Browsers except IE - the problem in IE (6,7,8) is that the color renders as a SOLID :(
The CSS I am using is legit per the MS Blog Post on IE Opacity Filter
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=75)";
filter: alpha(opacity=75);
The weird thing is that I have my elements structured with Z-Index (overlay with 90, lightbox with 100)
When I set the z-index to -1 - IE Opacity starts rendering, but >0 and it appears solid again?
Any ideas!? Its driving me nuts!
Are you using a lightbox plugin or are you trying to make your own? You might want to check out slimbox2 and see how he does it since he claims compatibility with all browsers of the rainbow.
Related
I tried to achieve a contrast effect on the logos for this page --> http://momarredi.homenet.org/
I used
img {filter: contrast(0%);}
to apply the effect on every image of the site. Everything is working fine in chrome and safari and opera, but not in firefox (I am on version 35.0.1).
I put now some code trying to simulate the effect, but with poor results..
Do you have any advice?
Thank you all
You know the part of a modal popup (image lightbox, yes/no dialog) that dims out everything behind it? I call it the Blanket. Cozy.
Anyway, I want my modal to be tucked in by a blanket who is half see-through. I can't seem to get it to work in IE7 and IE8.
Based on my readings from
This CSS Tricks Snippet,
This Quirksmode Article,
and Satzansatz's Article on the Quirky Behavior IE's Schizophrenia Can Yield,
This is what I have come up with:
.blanket {
z-index:100;
position:fixed; top:0;right:0;bottom:0;left:0;
/*//////*/ background:black; /*//////*/
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity: 0.5;
}
It doesn't work at all. I have no idea why, and I haven't found any permutations where it does work. At all. I can't even make a little static-positioned black square. What's going on?
How can I make opacity work across all significant browsers?
CodePen
The Fullscreen CodePen Result (for testing in IE)
In IE7 & IE8, I just see pure black.
Am I going crazy? Let me know if I'm going crazy..
But I'm starting to suspect that maybe IE10's "Browser Modes" emulation shit is quirky, insufficient, and responsible..
Was it something I've done? Or didn't!?
I'm using opacity and I want to apply it on an image.
This is my CSS code:
img {
opacity:0.4;
filter:alpha(opacity=40);
}
img:hover {
filter:alpha(opacity=100);
opacity:1;
-moz-opacity: 1.0;
-khtml-opacity: 1.0;
}
It works fine in Firefox, Chrome and Safari, but it is not working in Internet Explorer 9. The problem is at the hover effect.
On the simple img the opacity works in IE9, but the hover effect doesn't work. How can I solve this problem?
Opacity is not yet a CSS standard. However, it works in all modern browsers, and is a part of the W3C CSS 3 recommendation.
Please refer: http://www.w3schools.com/Css/css_image_transparency.asp
if no joy,
use compatibility mode
<meta http-equiv="X-UA-Compatible" content="IE=8" >
I had the same problem, try this:
hit F12 (debugging console), then F5 (refresh). IE9 pops up a little box:
'Internet Explorer restricted this page from running scripts or ActiveX controls'
Click the button 'Allow Blocked content' and your opacity should work.
Not quite sure how to ensure that it works automatically.
I have an unordered list with image links and when you hover over them they fade out a little bit and this shows all good in every browser except IE, of course. At first I thought it was just a png bug but after applying both of those fixes it still doesn't work. The page is at:
The page.
If anyone knows what is going on please let me know as I am completely stumped now. Thanks
It appears to work in IE7 and IE9, but not IE8. Interested, never seen that before.
Anyway, you can fix the problem by using a different method. Instead of using a list, just have your images (with links) inside the containing <div>, then apply a style to the links such that they have display: inline-block; - this will allow you to align them vertically with each other (vertical-align: middle;) and set their width if you want.
The opacity fade is being achieved by styles that IE doesn't support
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
It works in IE9 so first guess is you are using some css or javascript that isn't supported for earlier versions. You need to post the code so we can give you better guidance on how to resolve this.
I have a very simple requirement, make a link look disabled. Why is it this hard??
.disabled {
-moz-opacity:.50; -ms-filter:"alpha(opacity=50)"; filter:alpha(opacity=50); opacity:.50;
}
Is my style. I have applied it to an li...but in IE7 it just does nothing. FF and IE8 it seems to work in, but IE7 is just rubbish
Any clues?
As far as I remember, an element needs either layout (e.g. "zoom: 1") or a background color for filter:alpha to work.
Can i make a suggestion that I appreciate not exactly what you want but would give you an effect similar to opacity.
Open your image editor type some text in your default link colour
Change the opacity to 50%
Capture the new colour value
.disabled {
color:#yournewcolorvalue;
}
for example if i take default blue link color #0000FF
the 50% opacity value is #7F7FFF
It needs explicit dimensions or a zoom factor to "have layout" in IE land.
Not sure, but try 0.50 instead of .50
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
opacity:.5;