The fuzzy edges are no more. If you still see them on floated elements, let me know, but I think I’ve got ’em licked:
http://www.dillerdesign.com/experiment/DD_belatedPNG/#release0.0.6a
For giggles, try scrolling to about halfway in the document, and find the box that has a black background color. Click on it. The BG image almost has a lensing effect, which I find myself clicking on repeatedly like a cat playing with a ball of yarn.
December 15, 2008 at 7:23 pm
Easy to use, and works absolutely flawless. It comes just in time to, as I’m now in the stage of fitting in a project into IE6 as well. So, thanks very much!
December 15, 2008 at 10:16 pm
You’ve done a great job with this.
I know it has almost zero users, but IE5.5 may also be compatible if you change the conditonal comment.
Is relying on VML support safe on a high traffic website? Someone wrote that Antivirus software stops VML from being rendered for security reasons?
That’s the only thing stopping me from using this.
December 15, 2008 at 10:21 pm
I just found this:
http://googlemapsapi.blogspot.com/2006/09/vml-security-issue.html
Would that solve the problem?
December 15, 2008 at 10:37 pm
Third comment in a row but..
http://groups.google.com/group/google-excanvas/browse_thread/thread/8762ed1ede73509
December 15, 2008 at 11:36 pm
Mehmet: Third comment in a row doesn’t matter when it’s still a helpful comment! Very useful links indeed, I’ve bookmarked them for reference. I’m especially interested in the discussion around IE8.
December 18, 2008 at 9:44 am
Hi there!
great script!
one thing i noticed was a horizontal scrollbar when i used a larger (900px) background file, when i tile the bg it won’t show up…is this a known issue, do you know where this scrollbar could come from and how to avoid it?
thanx a lot, cheers, j
December 18, 2008 at 11:32 am
sharkbait, that indeed makes sense given what is going on in the background. I’ll see if I can introduce a fix.
December 19, 2008 at 9:19 pm
I develop on a mac, so I rely on browsershots.org to help me see how pages are rendered in different browsers. Unfortunately, after entering http://www.dillerdesign.com/experiment/DD_belatedPNG/ at browsershots.org, the transparent png’s didn’t render as intended in IE 6. With so much positive feedback on the script, I hope it’s something on my end. Any thoughts?
December 19, 2008 at 9:50 pm
I also use a Mac, but test with access to a functionally native IE6 through VirtualBox. It’s like a free (really) version of Parallels.
December 21, 2008 at 7:46 pm
Great work btw! I’ve been trying to get it working on tables (s) with background images applied but it doesn’t seem to work, it will only do so when I use a DIV. Am I doing something wrong or is there no support for this currently?
Joe
December 21, 2008 at 9:02 pm
Joe, indeed tables are unsupported. It looks like I forgot to add the element to this part of the doc: http://dillerdesign.com/experiment/DD_belatedPNG/#lacking
December 22, 2008 at 2:49 pm
Thanks, should have just looked at the source I guess! 🙂
December 27, 2008 at 6:18 pm
thanks for a great png fix.
will you support css id selectors? (#id)
December 27, 2008 at 7:58 pm
theflea: Any CSS selector will do. I’ve already been able to get it to work by pound-character prefix. Try it. Let me know if it fails.
December 29, 2008 at 6:30 pm
Strangeness on this end… after implementing your fix, refreshing the page opens an install dialog for Microsoft Office 2000 Premium.
“The feature you are trying to use is on a CD-ROM or other removable disk that is not available”.
Makes my png transparent, but also breaks my layout.
IE 6.0.2900
Windows XP
December 29, 2008 at 8:49 pm
findzen, that is indeed strange regarding you receiving a prompt for installation, I’m consulting Google at the moment…
As far as the layout breakage, that has happened to a small amount of people with this release, and a lightbulb went off in the back of my head that in one aspect I’m “doing it wrong.” However, for me to test my theory, I need code samples. Do you have a test case of your layout breaking? Otherwise I can merely speculate.
July 10, 2009 at 3:15 pm
I have this quark happening as well. The computer is Toshiba Laptop with Win XP 200 Home SP2 and Office 2008 SR-1. It’s prompting to install file DATA1.MSI. If you cancel out of the install, the png loads perfectly. Funny quark.
http://dashtondesign.com/png/png.html
There’s a sample of the page that creates the error for my Toshiba.
October 29, 2009 at 10:33 am
Hello.
Your fix seems to work great, besides the fact that I also get the Office Installer prompt. Have you found out what causes this?
Thanks a lot!
January 1, 2009 at 9:34 am
Hey Drew,
Happy new year! wow, you got the scrollbar-issue solved with the new script…but somehow it looks like the PNGs don’t get cached, so every time the page refreshes, the background disappears for a second. i’ve read in your changelog “images get cached correctly — most of the time” what does this issue depend on? cheers & thanks a lot, j
March 29, 2009 at 12:22 am
Perhaps something I’m overlooking. But when I use this on a tag like I get a nice blue outline around the image as is common with images within links, common and unwelcome. I can not seem to get rid of it, any advise?
March 29, 2009 at 1:47 am
David, can you provide me an example URL or ZIP file?
March 29, 2009 at 9:25 am
I must have been half asleep last night when I wrote that (the html tags got stripped). Anyways when setting up a test html zip, putting a style border: 0px; on the fixed png image was all that was needed to get rid of the border. So disregard my last comment 🙂 and once again thanks for this great solution!
April 10, 2009 at 8:13 pm
Hi Drew,
I have been running into an issue with a page I’ve been developing. Your javascript has definitely had great results with my PNGs but hundreds of pixels of space has been added to the bottom of my page when I use this:
DD_belatedPNG.fix(‘#container div’);
If I specify the div (i.e. #container div#stuff), it works fine. However, ideally because the layout is based heavily on PNGs, I would like to be able to just use a broad selector like “div.”
I also have a couple jQuery overlays and they have stopped working. They work if I specifiy the div. Any suggestions? Here is the URL:
http://client.hellokomo.com/scg/_dev/products-1.html
Thanks!
April 30, 2009 at 6:01 pm
Hi Drew, I have been using your Png fix for a while and never has any problem. Now that i started to use png within a div block that set to display:none initially and toggle to display:block later on by way of javascript. The png disappear completely when i enter the page. It only appear when the other display:none’s div got toggle to display:block. When I get back to the original div block the image still not showing while the other div show up fine.
Is there away to fix this, with the currentStyle so it won’t include display:none in the png?
July 29, 2009 at 9:54 am
Hi Drew,
First i want to thank you so much for this script you really helped me with i was searching on last 2-3 days for solution for png specially for css background images with positioning :D.
and for sharkbait, i had same problem from horizontal Scroll bar, horizontal scroll bar was because i put direction value for html tag “rtl”, if you have something like this remove it from there and put the direction value on body tag it will be enough and will solve the problem.
thank you again Drew