Problem with .png image in IE6

Hi Ishwor,

You have some options;

1. You can give IE6 special instructions to use the same kind of filter as for foreground images (as you've mentioned), instead of the background-image.
It could look like this:
div#myDiv {
background-image:url(image.png);
_background-image: none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png',sizingMethod
='scale');
}
What happens is that all browsers get the first line, correctly specifying the background image to use, while IE6 will then override that style with the following styles prefixed with an underscore "_".
The _filter line will then apply the png image on the element. You can also choose sizingMethod='crop' if you don't want the image stretched.

2. You can have a look at iepngfix.htc - a behavior file from TvinHelix / Angus Turnbull:
http://www.twinhelix.com/css/iepngfix/
It will basically do the same as the above solution, but without you having to think about it. I works for both foreground and background images.

WARNING: There are some limitations when using this technique for IE6 which you will have to be aware of - it CAN cause you a lot of trouble... On the page mentioned before, you can find more information, but I should point out that a) PNG background images WON'T tile in IE6, and b) Anything clickable /selectable inside the element has to have position: relative or absolute.

Hope that works.
(I've been dealing a lot with these png-fixes so just ask if you've got any trouble.)
Jakob.

Hi Jakob,

Many thanks for your such a prompt response. However, it's not working as you mentioned. If I use method #1, IE6 doesn't show background image at all. Method #2 had already been tried earlier before I posted the question. I downloaded the zip file of containing all required files and tested on my computer. Neither is it showing foreground image(<img>) nor background image as they could be seen properly online in that site. May be I'm not getting your instruction....a humble apology if that's the case. I'll be looking forward to your reply.

Thanks.

Ishwor

Hi Ishwor,

I would like to help, but to investigate, I will need to see your example and your source files.
If nothing works it is typically a problem with corretc filepaths to behavior files and images.
Can you post some code or a link to you page?

Jakob

Hi Jakob,

I'd sent 2 zip files containing source files to your gmail id. Plz check your inbox.

Thanks.

Ishwor

Hi Iswor,

Did you find a solution for this?
I think it's an important point to keep things simple in order to succeed with this problem. Using more that one approach simultaneously, especially without understanding - in detail - what they do, is bound to be painful :-)

I've 'fixed' 100's of transparent png's of all sorts, background, foreground, cropped, scaled, streching, - and usually a tailored solution has worked best and most robustly in the end.

Give me a specific and clean example and an image showing how it should look, and I can find the simplest solution. Even without using "blank.gif" images for replacements and the sorts :-)

Cheers,
Jakob

You can also use jQuery PngFix. This little piece of JavaScript will fix the missing PNG-Transparency in Windows Internet Explorer 5.5 and 6. It's light, it's fast and it's working as expected. All you have to do is to include the jQuery Javascript library and PngFix plugin into your page head:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.pngFix.js"></script>

... and this little piece of JavaScript :

<script type="text/javascript"> $(document).ready(function(){
$(document).pngFix();
});
</script>

From now on all PNG images on your web page will show as expected.

You can read more about this plugin here: http://jquery.andreaseberhard.de/pngFix/

Another JavaScript doing the same job is http://jquery.khurshid.com/ifixpng.php Hoever I can not guarantee this is working since i never used this plugin. From the demo I saw, it's ok just like the first one.

Hi Alopia,

Because of experience, I am naturally quite sceptical of these auto png fix scripts, though I admit that they can be very helpful for beginners.
I am also curious, so I set out to test the jQuery approach on one of my current websites!

I took away all my manual pngfixes and applied the jQuery as documented. After some fiddling I got it to 'do something'. I won't say thay I got it to work, because of the following situations:

1) My two png logos have jumped to different locations
2) Foreground images can no longer be saved from the context menu (typical problem)
3) The menu items were unclickable (typical problem)
4) My image replaced header was not transparent
5) Two inline png images had disappeared

Aside from these problems with png images, in spite of claims of non-obtrusiveness:
1) Other javascript, controlling dynamic comments and login scripts no longer worked

On the plus side:
1) Two of my png background images were correctly transparent and in the right position.

All in all I was disappointed to see that the result was even worse than I had feared. Apparently the jQuery script (in this version) doesn't address the typical issues with IE's filter AlphaImageLoader:
1) When the filter is applied to a foreground image, the foreground image itself must be removed from sight, but doing this the wrong way means that the image will no longer be saveable from the context menu. A custom solution can avoid that.
2) When the filter is applied to an element with relative or absolute position, all hyperlinks inside the element become unresponsive. With a custom solution you can insert an IE6 only wrapper with static position between the element in question and the hyperlinks, and apply the filter to the wrapper.
3) A background image with no-repeat specified is still stretched to fit the element instead of using sizingMethod='crop'.

Contrary to what you might think, I am the first one to appreciate a script that can do all this automatically, so I don't have to worry about IE6 - heck, I even wrote some myself. But in the end - in complex situations - it it just simpler and much more robust to get to the root of the problem, find out how it works and write custom IE6 specific filter css properties. It seems to me that so far auto-scripts can only handle around 25% of the different setups in which a png image can appear.

If you can get away with using this or another script, go ahead, otherwise, I am always willing to help :-)

Thanks,
Jakob

The question looks to be abandoned by the user who asked it. If no action is taken within 2 days, a Quomon Moderator will consider closing the question and distributing the points.

The Quomon Team

The easiest way....

head
<style> div.EXAMPLE1 {background:url(NAME.png) no-repeat; height:XXXpx; width:XXXpx}
</style>
<!--[if gte IE 5]>
<style type="text/css">
div.EXAMPLE1 { background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='NAME.png' ,sizingMethod='crop'); }
</style>
<![endif]-->
head

+

<td> <div class="EXAMPLE1"> </td>

Take a look:

http://www.studiouniquedesign.com/usluge...

page source: from 32 - 43 (for web design shape) + 205 - 235

My IE often get freeze recently, my friends recommend me a software, named tuneup360, he said it is very useful, which can fix all the computer problems~~but I still wonder are there any other ways to solve my problem?