Sunday, June 28, 2009

IE PNG Fix

I've been trying to remember a work around on the IE6 PNG image issue, I have made this work three years back, but after that clients have stopped supporting IE6, but recently some still wants to support IE6. So here is what I did.


If you have IE6 installed open it and navigate here; http://www.everythingcebu.com/inet-markets.com/index.html. Please take note that you may see some grayish background on the logo for awhile, it does take a second or two for the script to load... and voila! the png issue is fixed.


Others have used the png.htc, but some have used it differently and you cannot use it on background images and using the filter alpha load of IE6 sometimes make links not clickable anymore.


Here is the snippet on one of those divs:


#header_row{

background-image: url(../assets/logo2.png);

background-repeat: no-repeat;

background-position: 0px 0px;

behavior: url(scripts/iepngfix.htc);

}


The magic bullet is "behavior: url(scripts/iepngfix.htc);", one odd thing about dot htc files is that they do not need the "../" as in the case of the background image above, I do not know why but its just it. Make sure that you have a file named "blank.gif" on the root folder/directory of the site, if you plan to put the blank.gif somewhere you need to edit the HTC file, look for the line like below


var blankImg = 'blank.gif';


And make it to something like this???


var blankImg = '/images/blank.gif';


And lastly it is quite inevitable to use star html hack again, but what I do not yet get is when you try to isolate the issue with this hack:


<!--[if IE 6]> <link href="css/iecrap.css" rel="stylesheet" type="text/css" /> <![endif]-->


it won't work at all, or maybe it was just the multiple IE install that got all weird of a sudden.



I guess if you need more info here is where I rediscovered this; http://www.twinhelix.com/css/iepngfix/demo/

I guess I need to retest this with the new joomla versions.

No comments:

Post a Comment