A host of performance improvements and glitch repairs.
http://www.dillerdesign.com/experiment/DD_belatedPNG/#release0.0.7a
One IE band-aid at a time
A host of performance improvements and glitch repairs.
http://www.dillerdesign.com/experiment/DD_belatedPNG/#release0.0.7a
January 6, 2009 at 11:37 pm
A really good start. Better features would be:
a) Using a name filter to not transform ALL PNGs, but only ones with a special pattern. (Like Dean Edwards’ IE7 script.)
b) Auto-loading the script with an onDOMLoad function. (Allowing people to just drop the script reference in with a conditional comment and letting it go to town.)
January 9, 2009 at 10:14 am
Thank you for this wonderful script. I did notice that it is not working on tags.
I already have enough trouble styling . Hopefully it is an easily fixable problem.
January 9, 2009 at 10:38 am
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
January 14, 2009 at 3:55 pm
DD_belatedPNG.fix(‘img[src="*.png"]‘) crashes IE6
January 14, 2009 at 4:55 pm
Dimitri, you can’t use CSS selectors that IE6 doesn’t understand. Attribute selectors aren’t understood in IE6, not even a little bit.
Also, 0.0.7a handles this for you, just say fix(‘img’);
Read the changelog, fourth bullet point:
http://www.dillerdesign.com/experiment/DD_belatedPNG/#release0.0.7a
January 15, 2009 at 5:30 am
I seem to be getting an error on firebug:
styleSheet is undefined (Line 45) on 0.7a
January 15, 2009 at 2:52 pm
Jason, your second comment hasn’t shown up in public view yet, probably a cache thing…
…anyway, I probably should be doing some error catching in case people make the same fairly innocent mistake you initially made.
I like your site, btw. Usually I hate intro/splash pages, but yours made me chuckle =)
January 17, 2009 at 12:36 am
Great job man!
Changed the history of webdesign.
Thank you very much!
January 17, 2009 at 12:47 am
Heh, I don’t know about that, Carlos… I removed a bunch of frustrating gray boxes. Thanks for the kind words though =)
January 20, 2009 at 11:25 am
Works wonderfully for me in IE7, but having some issues in IE6 with rounded corners on elements, any ideas?
Great work, keep it up!
Geoff
January 20, 2009 at 8:42 pm
Hi Dillerdesign!
I have the following code:
Item1
Item1
Item1
css
#container{
background:url(imagem.png);
}
#container ul li{
background:url(imagem.gif);
}
Using your fix the background of the list does not appear!
Is it a bug?
January 21, 2009 at 4:20 am
carloslnx, I can’t help out with code snippets. I need a URL or a ZIP full of assets.
January 22, 2009 at 12:26 am
Thanks for the script – worked like a charm!
January 22, 2009 at 10:43 pm
When using the png fix on an image that’s inside a div with a overflow:auto, the image moves as you scroll down.
January 23, 2009 at 12:33 am
Seth, can you show me an example? I cannot reproduce your described issue.
January 23, 2009 at 1:03 am
Yes, and my fault for not clarifying this bug only happens in ie6.
http://sethmscott2.dreamhosters.com/Untitled.html
January 23, 2009 at 2:16 am
Seth, I haven’t figured out how to fix every layout/positioning bug in IE6, so there are still some you have to fix yourself =)
That scrollable element in your example, it has an ID of ’statusUpdates’ – try giving it relative positioning. Your problem will self-resolve after that.
#statusUpdates {position:relative;}
January 23, 2009 at 9:38 pm
Let me try again, I was trying to say that it is not working on hr tags. Just letting you know.
February 17, 2009 at 9:26 am
got an error when using this with the jquery dialog..
February 19, 2009 at 1:00 pm
First of all, thanks for your great job.
I have a desing involving the use of sprites of icons. Normally I use the pixel gif trick as the src of an image, and then change the background using a PNG sprite.
But DD_belated, doesn’t work with the tag img. Of course, I can use divs to place the icons, but I prefer to use img tag, as it complains the web semantic standars.
February 25, 2009 at 1:05 pm
Hey, great work! Any plans to support alpha png for input type image?
February 25, 2009 at 1:17 pm
Emil, not yet. A possible workaround is to use an image element inside of a button element.
March 3, 2009 at 11:15 am
Hi, thanks for the script!
There is a problem with background postion:bottom right.
http://myplace.labor.mokka.at/index.php?id=30
I have installed multiple IE, maybe thats the problem?
if the box is not displayed (because of scrolling,…) the bug disappears
any ideas?
thanks!
-mike
March 4, 2009 at 2:36 am
If your wife continues to give you glares for late-night code sessions, show her this comment:
You, sir, are a GOLDEN GOD. Thank you for this script. It’s not perfect, but it’s damn close and it has saved my bacon. Much respect!
March 4, 2009 at 2:57 am
Dylan, you get the weird funny comment golden star of the day =)
GOLDEN GOD DEMANDS SACRIFICE
March 18, 2009 at 10:41 pm
Great work on the script I did have one issue though when a background image is positioned using an em based value it doesn’t listen and will go back to a top left scenario. e.g. background: url(png.png) 0 1.455em no-repeat; will make the png act as though the 2 values are 0 0?
March 23, 2009 at 1:51 am
I’m having trouble getting selectors to work. Perhaps I am missing something. I can use ‘img’ as a selector well enough, but if I use a class name such as .someClass, it does nothing. Does the class need to be declared within the page markup? All of my CSS is declared in linked files.
March 24, 2009 at 6:41 pm
Hello, first thanks for great script. But I have some problems with hover. At the bottom of png_fix.js (I have renaimed it from original DD_belatedPNG_0.0.7a.js) I added “DD_belatedPNG.fix(‘*’);” and script apply fix to everything exept hover. Maybe its possible to fix it somehow?
DEMO: http://www.ennio.lt/works/aquafilter.lt/index.html
March 25, 2009 at 2:41 am
ennio, I could tell you why: there’s no PNG background applied to the inactive navigation elements initially. Now that I think about it, that is a requirement. They need to be fixed in the first place for them to react to changes, and they don’t get fixed if they don’t have a PNG background applied to them from the start.
March 25, 2009 at 3:06 am
Hm, part of it I have fixed with:
_background: url(img/none.png); (none.png doesn’t exist)
#menu a {
_background: url(img/none.png);
}
and
#menu a:hover, #menu a.act {
background: url(img/menu_right.png) no-repeat right 0;
}
working good. But
#menu a span {
_background: url(img/none.png);
}
and
#menu a:hover span, #menu a.act span {
background: url(img/menu_left.png) no-repeat;
}
looks like #menu a:hover span script cant understand. Any sugestions here?
P.S. #menu a:hover span can be fixed with:
* html #menu a:hover span {
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( sizingMethod=’crop’, src=’img/menu_left.png’ );
}
but would be nice without it…
March 27, 2009 at 1:45 am
Man, i love you.
I’ve stumbled through all png fix possibillities (and all made problems).
I finally tried yours and it simply WORKS PERFECTLY!
thanks again, keep up the good work!
March 30, 2009 at 11:48 pm
Drew,
I read that the “one pixel gap” problem was solved with version 0.0.6a (I didn’t even experienced it before…), but I’m having an one pixel shift to the left on the background pngs. If I change the background-position-x 1 pixel more to the right, then it fixes in IE, but gets broken in all other browsers… without the script, everything is in the correct position, but not transparent.
See http://www.ufmg.br/testpng/ for an example.
Thanks for the great Script!!!
March 31, 2009 at 1:17 am
Lucas do:
_background-position-x 1
or
-background-position-x 1
or
* html class or id name {
background-position-x 1
}
also I dont have any prob with background pngs… I think you do something wrong in css…
March 31, 2009 at 12:43 pm
Hello again!
Ennio, thanks for the tip, but that was not the approach that I was willing to do. I don’t want to use hacks that would invalidate the CSS. In this case, it’s better to use conditional comments to load an extra IE specific stylesheet (or even declare directly on the head).
I was trying to use less images (this site’s going to have an huge traffic) = less server load. But for that, I’d need pixel accurate positioning. I remembered that I’ve used DD_belatedPNG before without this problem in the following site http://www.ufmg.br/festivaldeverao/. Recapitulating what I did, I saw that I’ve used separeted images and “relative” positioning for the background-images (such as “left”, “right”, “center”, or even “0 0″).
I tried the same thing on the site in question and it worked!! So, the problem is with pixel specific positioning in DD_belatedPNG.
Drew, if you’d like to compare, the “fixed” version is in http://www.ufmg.br/testpng2/.
Again, thank you veeeeeeery much for this savior script, and hope there’s a fix for this!
April 1, 2009 at 5:17 pm
with:
* html class or id name {
background-position-x 1
}
CSS is valid!
April 3, 2009 at 12:09 pm
Hi Lucas,
I’m glad I’m not the only one with this problem. I’m also working on a very high traffic page that needs to support our beloved IE6, and this pixel-shifting problem is really nasty.
I’m also fully on your side regarding hacks, things should just work without it. Although I could imagine to use the background-position-x 1 proposed by ennio… if this works.
Thanks again guys, good to see that I’m not alone.
April 13, 2009 at 3:10 pm
When implementing this, my background images are disappearing completely.
I’ve followed everything to a T.
The background images are 1px in height and repeat on y axis. When I use the below code, the background images disappear completely.
DD_belatedPNG.fix('#container');
May 7, 2009 at 1:18 pm
Jarod, can you supply me with an example, in the form of a URL or ZIP archive?
July 7, 2009 at 10:17 pm
hi I am trying to get this PNG fix to work on the following URL:
http://www.octophilly.com/test/about
I am having the same disappearance problem on any of my images of divs.
this is what I am using:
DD_belatedPNG.fix(‘div, img’);
I know there is lots of other jQuery and messy inline JS right now, however even removing all that the problem was still there.
If I change the elements to just img, the divs reappear but the PNGs are not transparent. If I change to just div, the imgs reappear, so I know that the JS is taking effect, its just doing something weird.
Please help asap this is the last thing left to launch the site and as can be expected the client has no clue why IE6 is such a PITA.
(in the future this will be at http://www.octophilly.com/about if anyone needs to see it and the first URL is broken)
July 7, 2009 at 10:23 pm
2 other things real quick…
My PNG images in question all have alpha transparency. (I thought that was the whole point tho?)
Under ALTERNATIVE USAGE on the new page, you show to use the following code to get any element:
DD_belatedPNG.fixPng( yourElement ),
that should be
DD_belatedPNG.fix( yourElement ),
Correct?
July 7, 2009 at 11:18 pm
Hey don’t mean to be a pain, just thought I would update you on further testing. When viewing the demo on your own site, in my version of IE6, NOTHING LOADS! That’s right!
The only thing I can offer up is my browser version:
6.0.2900.2096.xpsp.080413-211
That, and the fact that this windows install is actually TinyXP installed on an old Dell I had laying around. I installed without IE or Outlook Support, however it still has the base install of IE in there if you EXPLORE a folder and then type the URL into the address bar… I usually use this as my absolute baseline testing of IE6. It is seeming to me that maybe the VML support is something that is part of one of the service packs or something? Bottom line is it doesnt work at all for me, so I will be going back to the HTC hack and find another way to tile the backgrounds. Thanks tho, this is great concept!
April 13, 2009 at 3:29 pm
I don’t know if you guys noticed it, but to apply the PNG fix to ALL elements, simply do this :
DD_belatedPNG.fix(‘*’);
It works just fine.
Thanks for your work, it’s the best PNG fix so far!
April 19, 2009 at 7:17 pm
Good job! In fact, I also wrote ie png fix based on vml 3 years ago, but I found a very serious problem: http://blog.csdn.net/hax/archive/2006/11/23/1406679.aspx
A background fix need to know the size of image, but you can’t get such info from vml (at least i can’t find the way), u need to create html image to get the size. So for one image, u will need download it twice. Even the images are in browser cache, poor vml still need to connect server and get a 304 response. Because my project need many images on any page, so vml cache issue make me go back to alphaimageloader though i realize the latter also have many many problems (10 times slower compare to vml, conflict with zoom:n (n!=1), not support palette png…)
At a glance of your source code, I guess your solution still have the same problem though i have no time to do a full test. Do you have any idea about the cache issue?
I also find another issue of vml today. it seems have buggy gammar correction. Though IE gammar correction also buggy but vml even worse …
April 30, 2009 at 4:31 pm
DD belated png: brilliant super awesome!
May 5, 2009 at 11:42 am
Hi Drew, and thanks for DD_belatedPNG. I have a page that has a background PNG image assigned to a – this nodeName also seems to make IE6 crash, as adding it to the exceptions list in fixPng allows execution to continue. I don’t know if this is a generic report, or specific to the page I have, but in any case, just reporting it to you.
May 5, 2009 at 11:43 am
Umm, that should be “assigned to a TABLE” – shouldn’t have actually marked it up in that last comment: sorry.
May 8, 2009 at 5:49 pm
fixed my issues…I love you!
May 21, 2009 at 5:47 pm
Anyone else getting object null errors on lines 45 and 89? It has to do with references to the styleSheet object (looks like both the creation of the VML stylesheet and a reference to this.styleSheet are coming up null)… anyone seen this? Any ideas? I can see the end of my rope from where I’m sitting…
June 4, 2009 at 2:18 pm
Been looking for an ie6 png fix for ages. Tried about 5 different fixes and yours is the only one that doesn’t screw up the rest of my site.
Awesome script dude!
Cheers
Scott
June 24, 2009 at 4:15 am
Cool script. However if I skip the IE conditional comment, I get an error on Firefox “styleSheet is undefined”. Perhaps the script could detect if it’s running on a non-IE browser?
September 24, 2009 at 10:19 am
Firstly let me congratulate you on writing the _best_ IE6 png fix script, its far superior to any of the others I have tried. Enough of the back slapping, I am trying to use your script in conjunction with a css sprites menu, the problem I am having is that the hover state always places the background image one pixel out vertically compared to the inactive state, no matter what I change in the hover background position style. Do you know if your script has a problem with background position on hover for css sprites?
October 2, 2009 at 2:23 am
Hi Jon,
I also had this problem with one pixel shift of the images when using css sprites and relative positioning.
Sadly, the only solution I’ve found was to use different images (loosin the sprites advantage) in conjunction with relative positioning (pixel acurate positioning leaded to the bug…).
Sooo, we still can’t have one sheet for all brwosers in this matter…
August 24, 2009 at 5:49 pm
No, .fix() takes a string argument, .fixPng() takes an HTMLDomElement argument.