Use the CSS PNG Fix instead of Javascript
Rob Loach - October 24, 2007 - 22:09
| Project: | PNG Fix |
| Version: | 5.x-2.x-dev |
| Component: | Code |
| Category: | feature request |
| Priority: | critical |
| Assigned: | Unassigned |
| Status: | closed |
Description
IE PNG Fix v1.0 RC4 is probably a better solution to use than the Javascript solution that's currently being used.

#1
There's a newer version available here.
#2
Here's a proof of concept patch. Though some work needs to be done.
#3
And, you'll need to stick this blank image in your modules folder.
#4
Very cool, I checked it into DRUPAL-5--2....
http://cvs.drupal.org/viewvc.py/drupal/contributions/modules/pngfix/?pat...
We really have to figure out how to get
base_path() . drupal_get_path('module', 'pngfix')into the CSS and the HTC Javascript.#5
Here's what I'm thinking....
1) The .htc file has a placeholder string in the space for the path to the blank image. On a page load the module checks if [files directory]/pngfix/iepngfix.htc exists. If not, if generates that file with the correct path filled into to the blank image in the module.
2) An admin screen where one can choose what ids, classes, and other css elements this should be attached to. I'd default to imgs and divs. Any time this is changed a new css file is generated... more in #3.
3) On page load the module checks if [files directory]/pngfix/pngfix.css exists. If not it generates it with the correct location of the .htc file and the chosen css elements to implement it on. It then adds the css file with drupal_add_css()
4) Domcument this module and it's limitations. There are a few such as a:hover transparent pngs not working.
What do you think?
#6
You solution would work, but it seems kind of hackish. There must be a better solution. I just found this, which will prove useful. It details how to get
base_path()into the JavaScript context.#7
The title is misleading since the PNG fix you point does use javascript. And what makes it better?
#8
@nevets - the javascript version only works for img tags, as i understand it. The CSS fix works when javascript is disabled and works on background images in css. It has a wider range of coverage.
@Rob Loach - the problem I see is the .htc file. We can include the css in the head. But, how do we get the .htc file to have the correct path?
#9
Does this do it? I includes the CSS manually, and uses Drupal.settings to pass the blank.gif path. I'm not sure if the value is retained in the JavaScript context though. Mind testing?
#10
Released a development branch for this so that it'll be easily obtainable by others who don't know much about CVS.
#11
It works for me.
... but not with garland. I noticed one of the two big shortcomings of this there.
1) It doesn't do and even breaks repeating pngs. What it breaks is the repeating. The images are still transparent.
2) :hover background pngs aren't transparent.
This does what it's supposed to.
This patch removes the css file that's not needed with your patch.
All if needs is an admin screen where someone can enter the css selectors they this to work on and I think this is good to go.
Nice work Rob.
#12
Very cool! I listened to the latest Geeks and God and you said that a release should be out by the time it aired... Oops! Haha, I'll make a release of this now.
Thanks a lot for testing this!
#13
yeah, that was a oops. sometimes I overestimate things.
#14
Automatically closed -- issue fixed for two weeks with no activity.