IE7 PNG transparency

[Jorge]

Hi,

In order to get IE to display properly a transparent .png all that is
needed is to style it like this :

image.style.filter= "progidXImageTransform.Microsoft.AlphaImageLoader
(src="+ image.src+ ", sizingMethod='scale')";

Or am I missing something ?

Thanks,

 

[Eric Bednarz]

In order to get IE to display properly a transparent .png all that is
needed is to style it like this :

You mean IE6 in your subject line, right?

image.style.filter= "progidXImageTransform.Microsoft.AlphaImageLoader
(src="+ image.src+ ", sizingMethod='scale')";

Or am I missing something ?

| AlphaImageLoader Filter
| Displays an image within the boundaries of the object and between the
| object background and content, […]
<http://msdn.microsoft.com/en-us/library/ms532969.aspx>

So what you are missing and what you need to get out of the way is the
(visibility of the) content. There are different approaches, personally
I would do something like

function png32(img) {
var span = document.createElement('SPAN');
img = img.parentNode.replaceChild(span, img);
span.appendChild(img);
img.style.visibility = 'hidden';
span.style.zoom = 1;
span.style.filter = "progidXImageTransform.Microsoft.AlphaImageLoader(src=" + img.src + ", sizingMethod=crop)";
}

(Provided the replacement really needs to be dynamic. If not, I’d rather
hard-code that in the HTML and CSS, YMMD)

 

[Jorge]

In order to get IE to display properly a transparent .png all that is
needed is to style it like this :

You mean IE6 in your subject line, right?

image.style.filter= "progidXImageTransform.Microsoft.AlphaImageLoader
(src="+ image.src+ ", sizingMethod='scale')";

Or am I missing something ?

| AlphaImageLoader Filter
| Displays an image within the boundaries of the object and between the
| object background and content, […]
<http://msdn.microsoft.com/en-us/library/ms532969.aspx>

So what you are missing and what you need to get out of the way is the
(visibility of the) content. There are different approaches, personally
I would do something like

function png32(img) {
        var span = document.createElement('SPAN');
        img = img.parentNode.replaceChild(span, img);
        span.appendChild(img);
        img.style.visibility = 'hidden';
        span.style.zoom = 1;
        span.style.filter = "progidXImageTransform.Microsoft.AlphaImageLoader(src=" + img.src + ", sizingMethod=crop)";

}

(Provided the replacement really needs to be dynamic. If not, I’d rather
hard-code that in the HTML and CSS, YMMD)

Thanks Eric. I'll try that. Yes, I meant IE6.
BTW, do you know what's the best way to detect IE6 ?

 

[Eric Bednarz]

BTW, do you know what's the best way to detect IE6 ?

Conditional Comments (in the HTML, not to be confused with JScript’s
Conditional Compilation, which cannot detect the browser version, and
don’t fall for the funny idea to infer the browser version from the
JScript version, which has never been a clever idea and has been
promoted from occasional to mainstream failure with XP’s Service Pack 3
.

 

[Jorge]

So what you are missing and what you need to get out of the way is the
(visibility of the) content. There are different approaches, personally
I would do something like

function png32(img) {
var span = document.createElement('SPAN');
img = img.parentNode.replaceChild(span, img);
span.appendChild(img);
img.style.visibility = 'hidden';
span.style.zoom = 1;
span.style.filter = "progidXImageTransform.Microsoft.AlphaImageLoader(src=" + img.src + ", sizingMethod=crop)";
}

Hi,

For some (unknown) reason, wrapping the <img>s with <span>s is giving
me layout (positioning) problems in the pages I'm currently working
on. I've found that reassigning the .src of the <img> to a (100%
transparent) .gif version of the same .png (of exactly the same
dimensions), does the trick:

<http://jorgechamorro.com/cljs/035/>

What do you think ?
Is there a better way ?

Thanks,

 

[Eric Bednarz]

For some (unknown) reason, wrapping the <img>s with <span>s is giving
me layout (positioning) problems in the pages I'm currently working
on. I've found that reassigning the .src of the <img> to a (100%
transparent) .gif version of the same .png (of exactly the same
dimensions), does the trick:

That’s the most popular method I know (except making it the same size,
but you cannot set style using the image dimensions in this case, see
below). It’s also the most maintenance unfriendly method, errors during
e.g. CMS implementation are likely to go unnoticed, especially if nobody
of the developers uses IE6, etc. I don’t like it, but maybe it fits your
situation wel enough.

<http://jorgechamorro.com/cljs/035/>

Eeks. Two points:
- Crop vs scale: I didn’t expect images to be resized by CSS (or the
width/height attributes of the IMG element type) in any public use case.
- The image is relatively positioned; removing that removes the layout
problem (using scale). If you think you cannot do that for some reason,
replacing the src may be the best way to go.

 

[Jorge]

Conditional Comments (in the HTML, not to be confused with JScript’s
Conditional Compilation, which cannot detect the browser version, and
don’t fall for the funny idea to infer the browser version from the
JScript version, which has never been a clever idea and has been
promoted from occasional to mainstream failure with XP’s Service Pack 3
.

I've ~copy-pasted this:

var isIE= false, ieVersion= 0;

(function () {
var appVersion = navigator.appVersion;
if ((appVersion.indexOf("MSIE") != -1) &&
(appVersion.indexOf("Macintosh") == -1))
{
var temp = appVersion.split("MSIE");
ieVersion = parseFloat(temp[1]);
isIE = true;
}
})();

It's not good ?

I'd prefer a way to detect it in JavaScript, so that I'll have to
modify just *one* .js file, instead of each and every .html.

TIA,

 

[Jorge]

That’s the most popular method I know (except making it the same size,
but you cannot set style using the image dimensions in this case, see
below). It’s also the most maintenance unfriendly method, errors during
e.g. CMS implementation are likely to go unnoticed, especially if nobody
of the developers uses IE6, etc. I don’t like it, but maybe it fits your
situation wel enough.

I've seen them being replaced by a single (always the same) 1*1 pixels
transparent gif. It doesn't work for me because (I guess) my .png's
"height"s aren't setup explicitly in the markup (only their "width"s).
If I use a 1*1 pixel (square) .gif, they're scaled as a square even
though they are rectangular (the scaled "height"s are wrong).

 

[Eric Bednarz]

BTW, do you know what's the best way to detect IE6 ?

Conditional Comments […]

var appVersion = navigator.appVersion; […]
It's not good ?

Do you read this newsgroup? ;-)

I'd prefer a way to detect it in JavaScript, so that I'll have to
modify just *one* .js file, instead of each and every .html.

Well, you asked for the best way (enfin, the best way is to avoid the
issue), not the laziest way (and there’s a jillion ways to mangle
templates and be lazy *and* have stuff done in every file).

Otherwise, the least you could do is wrap the sniffing in a Conditional
Compilation block. Since the UA version sniffing is doomed to fail in
some cirsumstances anyway, you could as well do some naive
feature-to-version mapping which is substantially shorter and probably
even less likely to err, e.g.

var isIE6 = false /*@cc_on || !!(!window.XMLHttpRequest && document.compatMode) @*/;

 

[Jorge]

Otherwise, the least you could do is wrap the sniffing in a Conditional
Compilation block. Since the UA version sniffing is doomed to fail in
some cirsumstances anyway, you could as well do some naive
feature-to-version mapping which is substantially shorter and probably
even less likely to err, e.g.

var isIE6 = false /*@cc_on || !!(!window.XMLHttpRequest && document.compatMode) @*/;

Cool... so this is my "final" version:

var isIE= false /*@cc_on || true @*/;
var isIE6= isIE /*@cc_on && !!(!window.XMLHttpRequest &&
document.compatMode) @*/;

function fixPNG (img) {
img.style.filter =
"progidXImageTransform.Microsoft.AlphaImageLoader(src=" + img.src +
", sizingMethod='scale')";
var src= img.src;
img.src= src.substring(0, src.indexOf('.png'))+ ".gif";
}

if (isIE6) {
var pngs= document.getElementsByTagName('IMG');
var e, n= pngs.length;
while (n--) {
((e= pngs[n]).src.indexOf('.png') >= 0) && fixPNG(e);
}
}

Thanks !