Using .htc file in Wordpress 2.5 for transparent png's
Im adding this comment because it chewed up a large amount of my time. Ok what was I trying to do. Well get a transparent png to work in good ol’ IE6. Pain isnt it. Im so sad we need to resort to applying to seeking hacks to make things work in IE6..IE7 or the next release IE8 which so far looks like it needs a zimmer frame to help it with talk of adding a new DOCTYPE just for IE …arghhh bolt-on’s!!!!!
Anyway Im ranting back to the issue…so I installed the latest version of Word Press on my main site and started playing about with the CSS. Making a trasnparent header looked fine in Firefox… but alas IE doesnt support transparent png’s. So hunting on the web I found a fair few examples. One of which is the using of a .htc file. Here is the link where I went to for this file and the blank.gif file you also need:
http://www.twinhelix.com/css/iepngfix/
following the example in the zip I dumped the .htc and blank.gif in my Wordpress themes root folder. Was it working NO!!
Hmmm after a while of playing with limited success, it tured out that if I place in the absolute URL to the .htc file and the blank.gif where ever it was being referenced this worked.
So for example lets say in your CSS you have:
#header {
margin: 0 0 0 0px;
padding: 0;
width: 100%;
height: 292px;
background-color: #4d4f57;
behavior:url(http://www.petermarkellis.com/wp-content/themes/pmellis/iepngfix.htc); }
then I had to go into the .htc file and change the following:
// This must be a path to a blank image. That’s all the configuration you need.
if (typeof blankImg == ‘undefined’) var blankImg = ‘http://www.petermarkellis.com/wp-content/themes/pmellis/blank.gif’;
so as you can see instead of it referencing just ./blank.gif Ive used the absolute path.
Anyway trying that approach worked. Lets assume that Wordpress has some fancy re writting going on in the backend, of which Ive not yet started to investigate properly so I cant tell you why this works and relative paths dont I’m afraid!