DD_belatedPNG: 0.0.6a

December 14, 2008

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:


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.


25 Responses to “DD_belatedPNG: 0.0.6a”

  1. Wang Tang Says:

    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!

  2. Mehmet Says:

    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.

  3. dillerdesign Says:

    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.

  4. sharkbait Says:

    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

  5. jomath Says:

    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?

  6. Joe Says:

    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?

  7. Joe Says:

    Thanks, should have just looked at the source I guess! 🙂

  8. theflea Says:

    thanks for a great png fix.
    will you support css id selectors? (#id)

  9. findzen Says:

    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

    • dillerdesign Says:

      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.

      • 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.


        There’s a sample of the page that creates the error for my Toshiba.

      • Tudor Says:


        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!

  10. sharkbait Says:

    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

  11. David Says:

    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?

  12. dillerdesign Says:

    David, can you provide me an example URL or ZIP file?

  13. David Says:

    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!

  14. Lark Says:

    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:



  15. Jinn Says:

    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?

  16. Fadi Says:

    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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: