transparent png html for dummies...

[HelmutBlack]

Hi all,

I'm in the process of creating a blog with png's. Well, I had no idea of the problems that IE has caused developers for ages. Here is my test blog:

http://mikestv.blogspot.com/ ps. the background is big, may take a few extra seconds to load.

In Firefox, my paper-like post bodys look good against the background. In good 'ol IE, I get a white square around them. I've read of some work arounds, but I'm not familiar enough with html to just start fixing this. Could someone as an example take one of my images and apply some sort of code to it so I could see if alpha transparency is possible in IE, and if so, how can I acheive it?

Thanks in advance

mike

[_Aerospace_Eng_]

Are you allowed to use javascript on blogspot?

[kewlceo]

OMG, a 1MB background image? What about dialup users?

Have you considered using a transparent GIF instead?

[HelmutBlack]

I'm not sure if you can use javascript or not on Blogger unfortunatly. The background is only temporary while I'm tinkering with making these graphics. I'll definatly have to compress some of them when I'm done. :D
As far as gifs are concerned, I was trying to avoid those as there's no alpha transparency and even when you do use gifs, the edges are so grainy.

[_Aerospace_Eng_]

Doesn't hurt to try to use JS. Add this in between your head tags of your blogger.
<!--[if gte IE 5.5]>
<script type="text/javascript">
function correctIEPNG()
{
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.onload=correctIEPNG;
</script>
<![endif]-->

[HelmutBlack]

Thanks, I put it right under the head tag. Unfortunately my file host isn't working this a.m. so I don't see any images. Will keep checking. I hope this works. Will report back, thanks alot!

[HelmutBlack]

Aerospace,

Unfortunatly it didn't work quite right. It trimmed off the sides of my post body so it's flat on the sides. The ridged paper on the sides and transparency is gone completely. You'll see the dif. between opening in Firefox vs. IE.