I've long been having problems with my PNG files and Internet Explorer ever since I got a guy to design one here on Webmaster-Talk for me.

Has anyone got a fix for these? I've Googled around and seen numerous methods (Javascript, PHP, blank gifs and more) but whenever I actually try these, they never work!

Has someone got a SIMPLE method of getting IE6 to support transparent PNGs somehow?

Thanks in advance,
Dan

Ie always got a problem with png files, i dont think there you can go around that with png, the easy way though is using a gif file , gif files also can produce good quality images if properly optimised with a good alpha challel too. so try gif stuff

Look, firstly stop self promoting in this thread. I want to work in web design - therefore I need to learn - I don't want to pay some guy I don't know to code my entire site for me.

Secondly, there are work-arounds with transparent PNGs - I just want a personal recommendation from a member about which one to use and which is easiest to do and understand.

I tried a .htc file for it, but I didn't something wrong or it failed, and didn't work. Thankfully, I run a website with a high proportion of techie type people, so it doesn't matter. You'd probably get it to work, so it's an option at least.

The fix for transparent PNGS in IE 6 (and below) will only work for a NON-REPEATING image. So, if you're trying to use it for a background, the htc and js solutions will not work.

I used the HTC png fix method on this site: www.sanomsfreeedgesalon.com - for the menu bars, it does work.

Originally Posted by whym

Secondly, there are work-arounds with transparent PNGs - I just want a personal recommendation from a member about which one to use and which is easiest to do and understand.

You can use the filter faux-css which is built into IE, but otherwise completely invalid. There's a javascript that finds png files and applies this for you in the page load event, but I've never had much luck with it.

I wound up using gifs instead for most images that demand transparency. Another option is to call out tho a gif or png using two different stylesheets and calling out to one of them after a little browser sniffing, either on the server, or in the browser.

OK I seriously need help on this - I've spent most of today now fumbling around trying to find a fix for IE6 on this and I seriously can't get anything I upload/incorporate to work!

Check out my redesign and the CSS at the moment - I've got a file at http://whymhost.co.uk/redesign/pngHack.htc which is supposed to fix this and also a transparent gif at http://whymhost.co.uk/redesign/transparent.gif, which is required by the script.

If someone can actually get this working, I'm more than happy to give you Talkupation - I'm getting a headache from all of these IE bugs!

I am getting a 403 error when attempting to view both links.

Ok Bud this will work for transparent pngs in IE6.

You need the Js script fixpng.js below and a >IE5.5 conditional statement in the head of the doc.

<!--[if gte IE 5.5000]>
<script type="text/javascript" src="fixpng.js></script>
<![endif]-->

// JavaScript Document
function correctPNG() 
   {
   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);

Thanks for the code - however, now IE6 is displaying a blank/white screen when visiting the site!

Since you are using a solid background color, make an image the same size filled with your sites bg color, then copy your png on to it and save as a jpg.

Are you sure there isn't another way that this could be done - I'd prefer not to restrict myself to a certain image size as the background.

Have you tried post #2 in the Reference Resources sticky thread in this forum ?

Your problem is that you have given a png file a GIF extension. Your logo.GIF should be saved as logo.png.

This works in IE6 using the Js code I posted - no blank screens.

Has to be said that your not making use of the logos transparency. You could have achieved this by giving it a background colour to match.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Whym Web Hosting, based in Presteigne</title>

<meta name="keywords" content="whym web hosting, herefordshire, presteigne, knighton, kington, llandrindod wells, herefordshire, leominster,  internet services, whym, mid wales, hosting, host, powys, stapleton, hereford, cpanel, the whym, presteigne web hosting, whym host" />

<meta name="description" content="Whym is a small company providing reliable web site hosting for individuals and small companies in Mid-Wales and Herefordshire" />

<link rel="stylesheet" href="http://whymhost.co.uk/redesign/style.css" type="text/css" />
<!--[if gte IE 5.5000]>
<script type="text/javascript" src="http://whymhost.co.uk/redesign/fixpng.js"></script>
<![endif]-->
<!--[if lte IE 6]><link rel="stylesheet" href="iefixes.css" /><![endif]-->

<script type="text/javascript" src="http://download.skype.com/share/skypebuttons/js/skypeCheck.js">
</script>

</head>

<body>

<div id="container">
<img class="floatLeft" src="logo.png" alt="Whym Web Hosting logo" width="193" height="100" />
<div class="menu">

<ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">FAQ</a></li>
        <li><a href="#">Support</a>

             <ul>
                 <li><a href="#">Video tutorials</a></li>
             </ul>
      </li>
        <li><a href="#">Login</a><!--[if lte IE 6]><table><tr><td><![endif]-->
             <ul>
               <li><a href="#">cPanel</a></li>

               <li><a href="#">Webmail</a></li>
               <li><a href="#">Billing</a></li>
             </ul>
                <!--[if lte IE 6]></td></tr></table></a><![endif]--> 
        </li>
        <li><a href="#">Contact</a></li>
</ul>  
</div>

<div id="contactInfo"><p>Looking for support? &nbsp; <a href="mailto:support@whymhost.co.uk">E-mail</a> &nbsp;<a href="skype:whymweb" onclick="return skypeCheck();">Skype</a>&nbsp; <a href="">Ticket</a></p></div>

<div id="intro">
<p><img class="floatRight" src="http://whymhost.co.uk/servers2.jpg" alt="Web servers" width="289" height="235" />
Whym is a small company providing web hosting for the Herefordshire and Mid Wales area of the UK. All of our packages combine reliability, affordability and great support with plenty of features, to meet the needs of all of our customers.
<br />
<br /> 
Whether you require hosting for a personal web site or for a small company, you can guarantee that your needs will be met through our extensive packages. Each of these include an easy-to-use, web-based control panel to administer your site and also an easy wizard to create your web site from hand, should you require it. If your needs ever change, upgrading is easy and seamless too.</p>
</div>

<div id="packages">
<h2>Hosting packages</h2>
<div id="allFeatures">
<p>All packages come with:</p>
<ul>
<li>cPanel, a web-based control panel to administer your site</li>
<li>A plugin to cPanel, called Fantastico, allowing you to easily install software packages such as shopping carts, onto your site</li>
<li>RVSiteBuilder for building sites at the click of a button, without need for knowledge of programming</li>
<li>Chatrooms and bulletin boards</li>
<li>Agora shopping cart</li>

<li>Web statistics</li>
<li>Powerful security features</li>
<li>CGI server access</li>
<li>Support for Microsoft Frontpage and Ruby on Rails</li>
<li>Inclusive email, Skype, MSN and ticket support</li>
</ul>
<a href="">More about the features and what they mean</a></div>

<div id="cone">
<h3>Cone</h3>

<ul>
<li class="resourceAmounts">Web storage space: 300MB</li>
<li class="resourceAmounts">Traffic usage allowance: 1500MB</li>
<li>1 FTP account for file transfers</li>
<li>5 email accounts with 5 mailing lists</li>
<li>1 MySQL database</li>
<li>5 subdomains</li>
<li>5 parked and addon domains</li>
<li class="price">&pound;3.99 a month</li>

</ul>
<a href="">Order now</a>
</div>

<div id="cube">
<h3>Cube</h3>
<ul>
<li class="resourceAmounts">Web storage space: 750MB</li>
<li class="resourceAmounts">Traffic usage allowance: 3000MB</li>
<li>5 FTP accounts for file transfers</li>
<li>10 email accounts with 50 mailing lists</li>

<li>5 MySQL databases</li>
<li>20 subdomains</li>
<li>20 parked and addon domains</li>
<li class="price">&pound;7.99 per month</li>
</ul>
<a href="">Order now</a>
</div>

<div id="sphere">
<h3>Sphere</h3>
<ul>

<li class="resourceAmounts">Web storage space: 1200MB</li>
<li class="resourceAmounts">Traffic usage allowance: 7500MB</li>
<li>20 FTP accounts for file transfers</li>
<li>50 email accounts with 100 mailing lists</li>
<li>20 MySQL databases</li>
<li>100 subdomains</li>
<li>50 parked and addon domains</li>
<li>Shell server access</li>
<li class="price">&pound;11.99 per month</li>

</ul>
<a href="">Order now</a>
</div>
</div>

<div id="footer">
<p>&copy;2007 Whym Web Hosting &nbsp;<a href="">Terms</a> &nbsp;<a href="">Privacy Policy</a></p>
</div>

</div>
</body>
</html>

Correct me if I'm wrong, but it's still mucked up on my site even after I've added this Javascript and the code exactly as you said.

This issue is really beginning to wear me out - please please please someone get this issue fixed!

I hope this can only be achieved graphically. The one way as some one suggested is by using baground of the page as the baground of the image and then save the image as png so it will appear perfect as if its transparent, eventhough its not transparent, please note you should try only 8 bit png to fake the alpha channel, if you have complex images or patterns coming below the transparent image this method is a clever way of doing things,
sharp transparent edges can be achieved by using 8 bit png on photoshop or fireworks.

the problem will arise where there is a gradient on a transparent image or you want the whole image transparent, there you need a uniform baground for the html page if you decide to still keep the alpha channel instead of using that colored baground of the image, plus you have to see a setting called Matt when you export a 8 bit png image, on Matt you have to select the exact color of the baground, in default matt may be set to white that creates unexpected outcomes on ie, so just set the Matt to the baground color of the page and your problem will be solved if you have a uniform baground page.

I myself is a designer and in all similar situation i just use the screen shot of the page as baground of the image so i dont have to use png,
and i can still use jpg files and fool the visitor from taking it as a transparent image.
Remember when you play with graphics all that matters is what people see and not the skill or technology thats behind it

Kiran, have you thought about getting a good spell checker? It will help you to get better clients I'm sure.