CODEWITHSUNDEEP
csspnginternet-explorer-6
Mr. Boy
Mr. Boy

Reputation: 63718

IE6 PNG-transparency CSS hack not working

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

Upvotes: 2

Views: 1571

Answers (4)

Georg Leber
Georg Leber

Reputation: 3605

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

Upvotes: 1

Misha Reyzlin
Misha Reyzlin

Reputation: 13906

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.

Upvotes: 0

Georg Leber
Georg Leber

Reputation: 3605

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.

Upvotes: 1

Julien Lebosquain
Julien Lebosquain

Reputation: 41233

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.

Upvotes: 3

Related Questions