I've been working on Kebima for several months now, using Firefox and Linux/OSX. Chalk it up to not doing enough research, but I just figured transparent PNGs worked in IE. Oh well. They don't. At least not in 6 and earlier. So began my mission to get them to work.
I was already using a lightbox package that uses the technique mentioned in the MS support article, but I didn't want to have to apply a div-specific solution for every png on my page... and since i'm using the silk icon set, this would mean a lot a lot of specificity.
Googling gets you a lot of results. The first hit is actually pretty good, in that it states that the script isn't maintained, but points you to 24 Ways, which has a pretty good solution. This likely works out of the box for normal web development (I did run into one bug... for some reason the section of the script that sets root on line 17 failed... I took out the bit that allowed you to limit the div the script was applied to). However rails likes to throw timestamps on the end of images, so instead of '/images/icon.png' you get '/images/icon.png?1209327623'
Because the 24 Ways script is looking for an img tag whose src attribute ends with '.png', this makes things not work. My solution was to add a regex to match rails style image srcs
var png_pattern = /\.png(\?\d*)?$/i;
And then match against that in fnLoadPngs
// background pngs
if (obj.currentStyle.backgroundImage.match(png_pattern) !== null) {
bg_fnFixPng(obj);
}
// image elements
if (obj.tagName=='IMG' && obj.src.match(png_pattern) !== null){
el_fnFixPng(obj);
}
And it worked. Plus I got a pretty decent workout running up and down the stairs between Mac and PC.
I was already using a lightbox package that uses the technique mentioned in the MS support article, but I didn't want to have to apply a div-specific solution for every png on my page... and since i'm using the silk icon set, this would mean a lot a lot of specificity.
Googling gets you a lot of results. The first hit is actually pretty good, in that it states that the script isn't maintained, but points you to 24 Ways, which has a pretty good solution. This likely works out of the box for normal web development (I did run into one bug... for some reason the section of the script that sets root on line 17 failed... I took out the bit that allowed you to limit the div the script was applied to). However rails likes to throw timestamps on the end of images, so instead of '/images/icon.png' you get '/images/icon.png?1209327623'
Because the 24 Ways script is looking for an img tag whose src attribute ends with '.png', this makes things not work. My solution was to add a regex to match rails style image srcs
var png_pattern = /\.png(\?\d*)?$/i;
And then match against that in fnLoadPngs
// background pngs
if (obj.currentStyle.backgroundImage.match(png_pattern) !== null) {
bg_fnFixPng(obj);
}
// image elements
if (obj.tagName=='IMG' && obj.src.match(png_pattern) !== null){
el_fnFixPng(obj);
}
And it worked. Plus I got a pretty decent workout running up and down the stairs between Mac and PC.
