10

I have this test page : http://jsfiddle.net/VWnm9/7/. The image is correctly faded on all my computers running IE7 or IE8, except for one computer that runs IE7 and doesn't fade the flower, even in noext mode.

The page is :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <style type="text/css">
        body {
            background: blue;
        }
        img {
            filter: alpha(opacity=10);
            opacity: 0.1;
        }
    </style>
</head>
<body>
    <img src="http://upload.wikimedia.org/wikipedia/commons/c/c3/Extracted_pink_rose.png" />
</body>
</html>

Does anybody have an idea why?

Alsciende
  • 26,583
  • 9
  • 51
  • 67
  • possible duplicate of [css opacity not working in IE7](http://stackoverflow.com/questions/2944019/css-opacity-not-working-in-ie7) – bobince May 31 '10 at 14:04
  • In fact, I posted twice. The first time SO redirected me to the "Ask a question" page so I thought it had lost my question. – Alsciende May 31 '10 at 14:31
  • Would be good to find out what the difference is between the IE7 machines that work and those that don't. IE7 version slightly different from Microsoft Updates maybe? – Alex May 31 '10 at 14:31
  • I've noticed lack of support for filter: alpha in [some] ie7 machines running on some Win 2k3 Server machines. Maybe there is a dependency on a graphics library that is included in Windows XP but not 2003 server? – nothingisnecessary Apr 18 '13 at 21:43

4 Answers4

21

You probably need to apply some of MS's filters.

Eg:

img {
    opacity: 0.1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
    filter: alpha(opacity=10);  
}

More info about opacity on quirksmode.

mqchen
  • 4,195
  • 1
  • 22
  • 21
  • It doesn't work. -ms-filter is for IE8 in compatibility mode, AFAIK. – Alsciende May 31 '10 at 14:16
  • 1
    It seems IE may require positioning on elements in order to apply filters on it. Try adding `zoom: 1`. More info here: http://joseph.randomnetworks.com/archives/2006/08/16/css-opacity-in-internet-explorer-ie/ – mqchen May 31 '10 at 14:35
  • A simple image like that already has layout. But I tried zoom:1 and setting width and height to be sure : nothing changed. – Alsciende Jun 01 '10 at 07:30
  • I'm sorry, but I can't seem to reproduce this error, and if it's only on one of your machines, then I'm sort of blank as to what the problem may be. Maybe there was a bug in an early IE7 version and that one machine's iE7 hasn't been patched? – mqchen Jun 01 '10 at 15:28
0

PNG Images works great in such cases.

Alex
  • 996
  • 2
  • 10
  • 17
0

Not 100% sure, but this could be because IE has trouble with opacity on transparent PNGs: See this SO question

Community
  • 1
  • 1
Pekka
  • 442,112
  • 142
  • 972
  • 1,088
  • I tested 8 computers successfully. Only 1 computer doesn't fade the image. The css used should and does work. The trouble lies in the one IE7 that doesn't work. – Alsciende May 31 '10 at 14:27
  • @Alsciende is this a problem in IE 7 in general or only one computer? – Pekka May 31 '10 at 14:45
0

I normally end up resorting to semi-transparent .PNG's. It's a nicer solution than CSS hacks when you need to support IE6 and some versions of IE7

Alex
  • 1,584
  • 1
  • 19
  • 29
  • I think IE6 needs some javascript hacks to understand alpha-transparency in PNG images. Eg. here is one such fix: http://www.twinhelix.com/css/iepngfix/ – mqchen May 31 '10 at 14:30
  • I need to adjust the opacity through javascript, so this is not an option. – Alsciende May 31 '10 at 14:31