PNG Hack for ie6

Hello all,

I know this topic is quite popular all over. However I am trying to troubleshoot my issues with the pngs on my site: www.slarc.com/firmprofile in ie6. none of them are showing up correctly.

I have used this method: http://www.twinhelix.com/css/iepngfix/demo/

However it is not working?

Any ideas?

Thanks,
Lorne

Any thoughts on this would be greatly appreciated.

Thanks in advance,
Lorne

You have a space in your reference CSS stylesheet.

img, div, a, hover, input	{ behavior: url("http://www.slarc.com/wp-content/themes/[COLOR=Red][B]slarc theme[/B][/COLOR]/js/iepngfix/iepngfix.htc") }

If you rename your theme to avoid any spaces between the names, see if that works?

Is your site configured for htc files?

See the documentation at twinhelix for more info.

When I copy your page locally it works for me so would seem to be an htc issue. The paths seem to be correct as I can grab the files.

Kohoutek, I now fixed the space issue. But still wasn’t fixed. I added %20 in that spacing.

img, div, a, hover, input	{ behavior: url("http://www.slarc.com/wp-content/themes/[COLOR="Red"]slarc%20theme[/COLOR]/js/iepngfix/iepngfix.htc") }

Paul, how are you able to test it locally when it’s PHP? I too, can retrieve the file. So it’s not a dead link.

Also I can’t find the HTC content on Twinhelix to get my site configured?

Thanks,
Lorne

If there IS a space in the URI of the htc, then you need to replace hte space with a %20 (covering all bases here)

Edit:

Didn’t refresh.Twinhelix doesn’t use HTC, it just uses a JS file :slight_smile:

I did that. It’s actually a space in my wordpress theme. I replaced it with %20. I missed it at first, but still not showing up properly?

Yea it uses an .htc “iepngfix.htc” but also has: “iepngfix_tilebg.js” for tiling backgrounds.

Paul, how are you able to test it locally when it’s PHP? I too, can retrieve the file. So it’s not a dead link.

I just copy the html (view source) and save it locally. Grab the css files with firebug and insert them into the head and point the urls to your images.

I downloaded your htc and tilebg.js and tested locally.

Also I can’t find the HTC content on Twinhelix to get my site configured?

http://www.twinhelix.com/css/iepngfix/demo/

Do this test to make sure that you are configured properly:

]
First try unzipping this default demonstration and uploading to your web server as-is. If it doesn’t work, you may have a MIME type problem. You must ensure your server is sending the correct MIME type of “text/x-component” for .HTC files. Try one of these two easy fixes:

[ot]There is a simpler way which I use, copy and paste the entire source code, and right after <head> is started just do
<base href=“urlofthepagehere” />

Then right before </head> place <style></style> to override any CSS. Sounds much easier then what you have going on lol[/ot]

Off Topic:

yes I do that sometimes as well :slight_smile:

Ok so I did this:

  1. Upload the “.htaccess” file from within this script’s download ZIP to your webserver, which will make Apache send the correct MIME type.

That didn’t seem to work. So then I did this:
2. Instead of calling “IEPNGFIX.HTC” from your CSS, upload IEPNGFIX.PHP to the same folder and call that instead, which also sends the right MIME type.

img, div, a, hover, input	{ behavior: url("http://www.slarc.com/wp-content/themes/slarc%20theme/js/iepngfix/iepngfix.php") }

That didn’t work either? What am I missing? I know this should be simple?

Ok now I have no idea what happened, but only my homepage is workign? All other pages give me 404 error, but it’s not even the correct 404 page that’s i’ve formatted?

Did this htc file that I placed on my site screw things up? I deleted it and didn’t remedy the problem?!

I got it working, I overwrote my last .htaccess file and messed it all up.

But I still haven’t remedied the PNG issue.

I’m so sorry to keep posting but I thought it’d help to know where I’m at and what I’ve tried.

I tried uploading the .htc file to my root folder, turns out that jacked all my pages with a 404 error. So I uploaded the old one.

I have now tried to go the PHP route. So I pointed my css to:

img, div, a, hover, input	{ behavior: url("http://www.slarc.com/wp-content/themes/slarc&#37;20theme/js/iepngfix/iepngfix.php") }

Then in the iepngfix.php file I have this code:

<?php

// Use this file in your CSS in place of the .HTC file if it works offline but not online.
// It will send the correct MIME type so that IE will execute the script correctly.

header('Content-type: text/x-component');
include('http://www.slarc.com/wp-content/themes/slarc%20theme/js/iepngfix/iepngfix.htc');

?>

Still doesn’t work?

Have you tried building it locally first to see if it’s really a server issue or not?

Create a static html page as I did above and test locally so that you know it’s working.

Just grab the html source and copy the css files locally and create a single testing page in a local folder. This is what I do for all sites I test on these forums and only takes a few minutes to set up.

I do notice that you have a non-existent selector n your behaviour rule.


img, div, a, [B]hover[/B], input	{ behavior:

There isn’t type selctor called “hover”. It would be “:hover” but you wouldn’t want to do that anyway so remove it.

Geeze, I can’t believe I had hover in there, I was ignoring that part and just troubleshooting it other places.

That seemed to do that trick! Thanks for the help.

Last problem: now I get this error when run in IE6 (but pngs work)

IEPNGFix: Unclickable children of element: <DIV id=sidebar>

This pops up on every refresh.

Thanks,
Lorne

Yes you can’t apply a png image to a positioned element that may contain links because they become unclickable in IE6.

What you have to do is first position the element and then add an inner non positioned element that you can apply the png image to. It’s the only fullproof solution I’m afraid.

I got everything working.

Thanks for all your help. To solve my sidebar PNG error, I just got creative how I was working in the backgrounds. But now it works.

Thanks again,
Lorne