Alpha PNG Backgrounds in IE, another sleight update…

I cannot say THANK YOU enough for this fix!! I've been struggling for 2 days to fix this png background issue at work and the deadline for the website launch was just getting closer... like in a few hours *shiver*

can you please post your code for background based HTML ?
as i have tried your code, place transparent.gif file but it didnt work.

please reply me on my mail-id so i can show you my code also.

To Imran Hossain:

The object that the filter is applied to must have layout before the filter effect will display. You can give the object layout by setting the height or width property, setting the position property to absolute, setting the writingMode property to tb-rl, or setting the contentEditable property to true.

Take from: http://msdn.microsoft.com/en-us/library/ms53296...

Hi, thanks for the code. For me the code works only for a split second. As in I can see the repeating background transparency working - but then it goes back to previous state. It works perfectly for the non-repeating backgrounds.

Any chance that i can see this on a working example?

I use the superslight all the time but am sick of the limitations to be honest.

Wow great site! Some really helpful information there.
I’m sorry for little off-topic, but I want to ask you about design of this site.
Did you make this template yourself or got from any templates website?
Looks pretty cool for me. Wonderful well this reading.

oops, I needed a height on the element that has the png background!

I wonder why this still doesn't work for my repeating png backgrounds?? All my other png's are fixed with the script, but not the repeat-y. I edited the transparent.gif path to the correct path - but still no luck. Am I missing something??

Hey Nater, great fix! Your hack worked for me.

In regards to Daniel Kedinger's comment, wondering how to fix the unclickable links, try putting position:relative on the links that are unclickable, and it should work.

Thanks Nater!

Your script modifications did a great job fixing the repeatable background PNG issue...but now none of my links are clickable...any ideas?

wedding.kedinger.com

Thanks,
Daniel Kedinger

what are these pictures : "x.gif and "../images/blank.gif" ?

Thanks!

Hi Nater,
I'm eager to try out your png fix - i'm not a coder, so bear with me: the link back to the instructions on Youngpup’s site doesn't work - he seems to have removed the archived post? so now there doesn't seem to be any instructions?

i've linked the .js file to my page, placed an x.gif in the root, and added a "blank.gif" in root as you've noted. (and in both cases corrected the urls in the js file to match.

no luck!
any thoughts?
thanks,
paul

Hello

I was using an old version of sleight+sleightbg, but I have a big problem with png background in DIV (the picture is scaled, so your script seems to be the solution, but, what are these pictures : "x.gif and "../images/blank.gif" ?

Thans a lot

I’m working on a personal portfolio and I’ve run into the IE png glitch, both for regular pngs as well as repeating background ones. I’ve looked around for lots of different png hacks and fixes but can’t seem to find any that actually Work. I've read lots of positive reviews about the sleight hacks but yet when i try them on my site they don't help at all. i've tried asking around on different sites for suggestions but no one seems to ever reply back. my site is currently at:

http://www.pinstripepresentations.com/index.php

Any help would be appreciated if you can spare the time. thank you very much.

tHANKS!

ALEX: So sorry about that, isBottom was left in as a mistake, my current implementation of this script includes additional functionality, and scans the page for certain elements that have a background image positioned at the bottom, so provide a visual "bottom" to their child element. i removed it from my snippet as well as from the download.

the function that i put together to fix the bottom positioned bg images is this.

[js]
function fixBoxes(){
var boxes = document.getElementsByClassName("box-wrapper");
for (var i = 0; i < boxes.length; i++){
var boxBottom = document.createElement("div");
var src = boxes[i].currentStyle.backgroundImage.substring(5,boxes[i].currentStyle.backgroundImage.length - 2);
boxBottom.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')";
boxBottom.className = "box-bottom";
boxes[i].style.backgroundImage = "none";
boxes[i].appendChild(boxBottom);
}
fnLoadPngs(); // now let's fix the pngs.
}
[/js]

and it's called like so..

[js]
//...
return {
init: function() {
if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {
if (document.getElementsByClassName("box-wrapper")){ // check to see if we have any 'boxes' on the page
addLoadEvent(fixBoxes);
} else {
addLoadEvent(fnLoadPngs);
}
}
}
}
}();
bgsleight.init();
[/js]

The isbottom variable is not used for anything, did you forget something?

i have a png on my page but it doesn't appear at the bottom when using the code in your copy of bgsleight

I can't figure out what to do with isbottom in order to make the image appear at the bottom if its meant to