PNG in IE??

Hello there!

I have a problem with transparency in IE,in FF everythings fine.

In FF: http://img108.imageshack.us/img108/9752/ffyu0.jpg

In IE: http://img227.imageshack.us/img227/5317/iego4.jpg

Anyone know a way to fix it on?


Or that could help me out to do it in css if not possible to use a PNG image..


Regards

Graphixx

 

IE < 7 don't support transparent PNG images.

However, you can take a look here and see if this solves your problem:
http://alistapart.com/stories/pngopacity/

 

To create transparency you need to use a different format to jpgs. You should be using gif or png file formats. You can convert your image into these formats by using the export wizard on many graphics programs.

Here are a few threads that relate to your issue and may help you further:

http://forums.digitalpoint.com/showthread.php?t=127452

http://forums.digitalpoint.com/showthread.php?t=126818

 

actually my mistake yeah IE doesnt support transparent png format. You need to use the gif format

 

I tried out with .gif but that didnt went out so good

 

When you export your file to gif format make sure that you enable alpha transparency

 

Checked on IE 7,no support for PNG transparency.

 

Here's what you need... I use it for most of my projects.

http://homepage.ntlworld.com/bobosola/

Good luck!

 

This is by far the easiest way to fix the problem:
http://www.justin-cook.com/wp/2006/03/14/javascript-fix-png-transparency-in-ie-without-htc-file/

 

Haven't tested myself since I have to start up another pc to run IE7, but IE7 should support this:
http://blogs.msdn.com/ie/archive/2005/04/26/412263.aspx

 

Yes, IE7 does support it. You have to actually disable the transparency alpha filter fix for IE 7

 

Could someone please give me a real step by step to make it work??
The blank.gif is in the image folder.
I added this one in the CSS file right under BODY:

function fixPNG()
{
        for(var i=0; i<document.images.length; i++)
        {
                if(document.images[i].src)
                {
                        var imgName = document.images[i].src.toUpperCase()
                        if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
                        {
                                document.images[i].runtimeStyle.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + document.images[i].src + "', sizingMethod='image');";
                                document.images[i].src='images/blank.gif';
                        }
                }
        }
}
agt = navigator.userAgent.toLowerCase();
if((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1))
{
        window.attachEvent("onload", fixPNG);
}

Code (markup):

In FF its same same,but in IE its nothing now, dont see anything of the PNG,maybe i did something wrong?

Maybe i cant get it to work at all?

Here is the code where the PNG is:

<tr> 

    <td background="<?php echo $mosConfig_live_site;?>/templates/lost's/images/1.png"><table width="100%" border="0" cellspacing="5" cellpadding="5">

        <tr>

Code (markup):

Any suggestions on what i have done wrong?

Regards

Graphixx

 

It doesn't work on backgrounds

the only way to simulate that is to place the image on the site, give it a lower z-index than the foreground content, and position it behind the content

 

Try this webfx.eae.net/dhtml/pngbehavior/pngbehavior.html

 

Anyone that can help me out to make this in css instead?
I found a code that worked but i have no idea on how to add in the css to make it correct

 

I would say just stick with transparent gifs as transparent pngs are not well supported on many browsers. So instead of doing hacks, just put in transparent gifs