...

View Full Version : PNG transparency in IE6



spadez
01-29-2007, 07:09 PM
This is really important to me, ive been trying to get this working on my site for months, i really hope you guys can help me sort this out.

Basically ive got a semi transparent page background image which is on top of a body background image. This works great in IE7 and Firefox but 40% still use IE 6 so i need a solution to get this working for them.

Ive found this solution:

http://blog.bjorkoy.com/2006/12/12/flawless-and-fast-png-support-in-ie6/


First upload the iepngfix to your css folder (the following is inside that file)


<public:component>
<public:attach event="onpropertychange" onevent="doFix()" />

<script type="text/javascript">

// IE5.5+ PNG Alpha Fix v1.0RC4
// (c) 2004-2005 Angus Turnbull http://www.twinhelix.com

// This is licensed under the CC-GNU LGPL, version 2.1 or later.
// For details, see: http://creativecommons.org/licenses/LGPL/2.1/


// This must be a path to a blank image. That's all the configuration you need.
if (typeof blankImg == 'undefined') var blankImg = 'blank.gif';


var f = 'DXImageTransform.Microsoft.AlphaImageLoader';

function filt(s, m)
{
if (filters[f])
{
filters[f].enabled = s ? true : false;
if (s) with (filters[f]) { src = s; sizingMethod = m }
}
else if (s) style.filter = 'progid:'+f+'(src="'+s+'",sizingMethod="'+m+'")';
}

function doFix()
{
// Assume IE7 is OK.
if (!/MSIE (5\.5|6\.)/.test(navigator.userAgent) ||
(event && !/(background|src)/.test(event.propertyName))) return;

var bgImg = currentStyle.backgroundImage || style.backgroundImage;

if (tagName == 'IMG')
{
if ((/\.png$/i).test(src))
{
if (currentStyle.width == 'auto' && currentStyle.height == 'auto')
style.width = offsetWidth + 'px';
filt(src, 'scale');
src = blankImg;
}
else if (src.indexOf(blankImg) < 0) filt();
}
else if (bgImg && bgImg != 'none')
{
if (bgImg.match(/^url[("']+(.*\.png)[)"']+$/i))
{
var s = RegExp.$1;
if (currentStyle.width == 'auto' && currentStyle.height == 'auto')
style.width = offsetWidth + 'px';
style.backgroundImage = 'none';
filt(s, 'crop');
// IE link fix.
for (var n = 0; n < childNodes.length; n++)
if (childNodes[n].style) childNodes[n].style.position = 'relative';
}
else filt();
}
}

doFix();

</script>
</public:component>




Second, paste this code into your CSS file:
img { behavior: url(iepngfix.htc); }


I adapted this for my site. For the advanced css definitions for the page background i put this code:


behavior: url(iepngfix.htc);

although i did try this:


img { behavior: url(iepngfix.htc); }

However, this doesnt work. I know that the code works when correctly implemented because its working on their site, when i do it doesnt display the semi transparency in the png overlay image at all, its as if the png wasnt there or is totally transparent not semi transparent.

Can anyone help?

James

numchucks79
02-04-2007, 02:44 PM
I had the same problem too--

basically i realized that the path you pass to behavior property is relative to the page, regardless of where you are declaring the behavior property (inline or in a stylesheet in some other directory)

absolute paths to the files will also work. (e.g. url(/css/iepngfix.htc) etc)

you also need to point iepngfix.htc to blank.gif using the same method. just edit iepngfix.htc file and where it asks for the path to blank.gif, use either a path relative to the page, or use an absolute path to blank.gif.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum