Dealing with IE6 and png's - part 2
Ok - here's the long awaited follow up to this little series of posts dealing with IE6 and png's.
The last time we saw how we can make use of transparent png's as backgrounds in our site layouts, included in our .css files. But what if we want to use png in our html source like so:
<img src="/images/transparentIllustration.png" heigth="20" width="200" />
Here's the way I prefer to deal with such situations. This method is a "implement once, work on all images" kinda thing.
The downside, but one I'm willing to live with, is that the IE user has to have JavaScript enabled.
First create a pngfix.js file and paste the following into it:
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
if ((version >= 5.5) && (document.body.filters))
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
var version = parseFloat(arVersion[1])
if ((version >= 5.5) && (document.body.filters))
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
Then in the head of your page you do this:
<!--[if lt IE 7]>
<script defer type="text/javascript" src="/js/pngfix.js"></script>
<![endif]-->
<script defer type="text/javascript" src="/js/pngfix.js"></script>
<![endif]-->
As much as I wish I was smart enough to come up with this my self, the credit goes to Bob Osola who in turn is crediting more people on his site.
Could you give me an url so I can see what you are doing?
It'd be much easier to check out what might be wrong instead :)
Trond
That is weird, as I always have my images in a subfolder, and have no problems of the sort you describe.
Trond
#contentwrapper {
background-image: url(/images/content_bg1.png);
background-repeat: no-repeat;
}
/* IE hack */
* html #contentwrapper {
height: 100%;
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='/images/content_bg1.png');
}