tags:

views:

321

answers:

4

I looked around and decided to use a CSS approach rather than rely on JS... I figure the kind of corporate users stuck with IE6 might also have JS disabled by IT departments.

So In my HTML I have:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>My Page</title>
<link rel="stylesheet" type="text/css" href="default.css" />
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="ie6.css"><![endif]-->
</head>

<body>
    <img src="media/logo.png"/>
</body>

Then my ie6.css consists simply of:

img
{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
}

However none of this makes the slightest difference, no transparency. I commented out all the rest of the page so it is literally that one and still no luck. I removed the default.css stylesheet and still no difference.

EDIT: I now got it working, using the .htc method, loading that file in a conditional IE6 test block. It turned out the problem I was having was that Windows 7 had 'locked' the file (I don't even know what this means) and this blocked IE from loading/using it.

+2  A: 

If I'm not mistaken, you must use

progid:DXImageTransform.Microsoft.AlphaImageLoader(src='yourimage.png')

for every and each image, you can't make it just work for all images.

Julien Lebosquain
You are correct - only the javascript options give you the "we'll handle everything"..
Dan Heberden
d'oh, I just copy-pasted without understanding!
John
How to apply this for inline images?
metal-gear-solid
+1  A: 

I am using the solution of following page: IE PNG support
Following the online demonstration online demonstration step by step, your pngs will be transparent also in IE.

Develman
I don't get it. His demo works on my IE6 VM but when I copy-paste, my page doesn't. I can't see anything wrong :(
John
I've moved my image to the same level as the HTML. And copied all the files. And it still doesn't work. I put my image in his test and it _does_ work. I copy his self-test code into my page and clicking the link gets a page error: 'IEPNGFix' is undefined. What more does it want from me?!!
John
Oh, it works now. See my update... no idea what that's about!
John
A: 

You would probably like to take a look at http://www.dillerdesign.com/experiment/DD_belatedPNG/

It also allows you to use pngs with alpha-channel with CSS background-position property, which you can't usually, when using AlphaImageLoader.

gryzzly
+1  A: 

In the HTML page you have the path to the image relative to the HTML file (media/logo.png) in the default.css you have an entry with behavior: url(iepngfix.htc); (path to the iepngfix.htc is relative to the HTML file) and in the ie6.css you have an entry with filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='media/logo.png', sizingMethod='scale'); with the path to the image relative to the CSS file. And at least you need to change the path in the iepngfix.htc (IEPNGFix.blankImg = 'media/blank.gif';)

You need to have following folder structure:

  • HTML file
  • iepngfix.htc
  • ie6.css
  • default.css
  • /media/logo.png
  • /media/blank.gif
Develman
You're mixing up two approaches. The DXImageTransform is not used with the HTC. But anyway, I have blank.gif as a sibling of the HTML, not in media folder. Is there any reason blank and .png need to be in same location, because other than that my paths are set up right.
John
It was just a possible szenario to show a setup of files and its paths. In my application the folder structure is just more complicated. Just wanted to show a simple configuration for tests ;)
Develman