PNG transparency

[gigi75]

Hi,

Could somebody explain how this works exactly?

<img src="test.png" width="247" height="216" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.png', sizingMethod='scale');" alt="">

this is the way i did it but i see a border around the image...it seems to work for everyone but me! i'd like to know if i do it right...this is my link:
http://www.subwayslims.co.uk/pngfix4.html

if you help I'm sure you'll have a great 2008 (and you'll make me happy too!! :) )!!!!

CHEERS

[WebJoel]

I don't see any image in Firefox. The script is IE-proprietary.

Just use this:

<!-- next: PNG fix for ltIE7. Important * do not remove or alter -->

<!--[if lt IE 7]>
<script language="JavaScript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
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
}
}
}
}
window.attachEvent("onload", correctPNG);
</script>
<![endif]-->Place this before the "</head>" of your html document. This will make *png files work for all browsers.

[gigi75]

thanks i used this script, it's workign BUT... increases the image size (if you view in FF, it looks the way it should be, in IE6 the height's increased)

do you have any idea how a way around to this?

thanks

[gigi75]

Sorry i forgot to past the link:
http://www.subwayslims.co.uk/pngfix3.html

[WebJoel]

Well that's weird alright. :confused: I know that IE seems to have difficulty with sizing fonts at, around or just below "10px", and this image is height:11px;, so maybe IE is incorrectly increasing the 'height' by a couple of pixels...

I tried stating "width:31px; height:11px;" and that made no difference (size still increases on IE, as you stated)... but if you increased the height to maybe 15px and checked FX/IE, -the image is relatively the same height... :confused:
That is fairly weird though... an IMG should be handled as-is unless there is some PARAM at work here, re-sizing the image... About the smallest image that I ever work with are favicon image, -and they are 16px X 16px... and appear exactly the same size in IE/Fx. -Can you make your image be not 11px tall, but 14 or 15px tall and appropriately width? That might 'fix' the problem..

I downloaded your image and referance it directly from my local HDD for my tests