views:

63

answers:

3

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"&gt;
<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?

+2  A: 

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
It doesn't work. -ms-filter is for IE8 in compatibility mode, AFAIK.
Alsciende
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
A simple image like that already has layout. But I tried zoom:1 and setting width and height to be sure : nothing changed.
Alsciende
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
A: 

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

Pekka
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
@Alsciende is this a problem in IE 7 in general or only one computer?
Pekka
Only one computer.
Alsciende
A: 

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
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
I need to adjust the opacity through javascript, so this is not an option.
Alsciende