Pngfix

Last modified: June 2, 2009 - 15:27

To work properly with pngfix we have to use the "." or the "#" element from the css. This must be written in the small text area of the module.
something like this:

.pngfix, #logo, .logo-inner,

If you have problems applying the fix to CSS background images, try something like this instead

span.pngfix, div#logo, div.logo-inner,

Oskar

Examples:

Here are some examples in case you are having trouble.

Example 1:

example1.html

<div id="body">
<img src="transparent.png" class="whatever"/>
</div>

The snippet that should be added in the PNGfix interface:

#body

Note that the fix was not added to the "whatever" class, as it is not surrounding the element that needs the png fix.

Example 2: (background images)
example2.html

<div id="container">
     <div id="contentbox">
          <p>blah blah blah</p>
     </div>
</div>

example2.css

#contentbox {background-image:url(transparent.png);}

The snippet that should be added in the PNGfix interface:

div#container

div#container is used here because it is the element that immediately surrounds the element containing the transparent png.

To accommodate both of the above examples, your PNGfix entry should look like this:

#body,div#container

» Login or register to post comments

to be more clear, by digging

abaddon - November 5, 2008 - 23:05

to be more clear, by digging through the source, this module passes whatever you set in its css classes arguments to this javascript function

 * @example $(function(){$('div.examples').pngFix();});
 * @desc Fixes all PNG's within div with class examples

im not quite sure it works to pass more than one selector (comma separated values) like its advertised by the module
and it doesnt have to be that the div (or whatever) you pass its directly above the img you target

for garland and to fix its logo image you can pass div#logo-floater
for the drupal.org site you can pass div#header or simply #header (i think) as well (# for id="" and . for class="", you would pass div.header if instead of id would have been a class..)

   <div id="header">
            <a href="/" title="Index page"><img id="logo" src="/sites/all/themes/bluebeach/logos/drupal.org.png" alt="Logo" /></a>

hope this makes this reaaally clear :-)

background images?

mkeith - November 12, 2008 - 19:52

i launched a new site last week and had a slew of people comment that the site looked weird to them and come to find out they were all using IE6. i had originally planned to forget about the whole IE6 PNG issue, but now i'm having to go back and find a work around so the site looks nice in IE6 as well. i've installed the PNGFIX module and it is working on PNG images that i am using in custom blocks, but it isn't working for PGN images that i have set as background images in my stylesheets. for example, i have a div with the id of "main-content-top-cap" i have defined a background image for that div. i have just tried plugging the div into PNG fix by typing "#main-content-top-cap" but it doesn't appear to fix the problem.

here's a link to a sample page...

http://dev.sacherokee.com/media-publishing/automotive-group/auto-remarke...

any help would be much appreciated...

thanks!

try div#main-content-top-cap

ipwa - November 13, 2008 - 05:09

I was under the impression this worked for background images too, because the jQuery plugin does, but I had never used it for that. I looked into the issue queue of the module and it looks like someone figured it out in this post.

div#main-content-top-cap

Nicolas
-------------------------
http://nic.ipwa.net

Again about background images

gurnetko - May 26, 2009 - 09:37

i've some problems with setting png-fix for background images.
The string is like this: "div#header, div#navbar, div.region-left, div.region-right".
But it only stretches it on pages width (maybe container block width?).

Have anyone ideas???

belatedPNG

dzieyzone - October 24, 2009 - 03:38

Hi,
Try to use this http://drupal.org/node/611816 it is called belatedPNG module which is a integration of DD_belatedPNG. look at www.spinweb.ph for example demonstration of site. It works with image background with background image position and a:hover support. The only issues right now is a 1px shorter for some reasons.

incompatible with jquery 1.3.2

madlee - June 2, 2009 - 15:27

If you are using updated jquery (1.3.2), you will need to manually update the module with the new jquery version of pngfix.

Using PNG Fix makes the whole image disappear

timingalls - July 7, 2009 - 04:15

I'm not sure why, but whenever I add the relevant class or DIV id to the module's form field, the entire image disappears in IE6 instead of just the background. I'm using IE6 in WINE (via Crossover Office) on an Ubuntu Linux desktop. I'm not sure if that should make a difference. I've used the GIMP to save the PNG, and I've tried it tons of different ways, with different Drupal themes, but each time, the whole image disappears. Check the logo at http://p5.ideadynamics.net for an example. I saved the transparency pixels with the background color a close match to the background, but I've done it without any background info, and the result is the same. In the GIMP, it asks you both whether you want to save the transparency info and set the background color to the active color in the tools pallet.

I wonder if someone could snag the image and try it out with PNG Fix on a different site or something. I'm at a loss for why this isn't working.

Does anyone have an answer to

smabbott - November 28, 2009 - 22:50

Does anyone have an answer to this? I'm having the same problem.

IE 6 PNG transparency side effects

xenophyle - December 7, 2009 - 17:43

I spent several days struggling with png transparency and IE 6. Sometimes you will get side effects from applying the transparency filter, either yourself or through a script/this module. There are a number of sites that describe fixes for this, but most problems I found could be fixed by adding position:relative to the css for the tag that contains the image or to one of its recent ancestors. Trial and error will probably be needed. I also found that sometimes problems with the image occurred when it or one of its ancestors was a floating block.

This is one site that I found helpful, although I don't think it specifically addresses disappearing images, but it may help anyway.
http://www.satzansatz.de/cssd/tmp/alphatransparency.html

I tried a variety of scripts to apply transparency in IE 6 and eventually found this method to be simpler, especially as there were only 10-15 images in the whole site that were supposed to have transparency:

http://www.belafontecode.com/create-transparent-pngs-in-ie6-using-alphai...

(What this page describes is applying the transparency manually in your IE6-specific css.)

Hurray! This module just

mgladding - July 7, 2009 - 17:51

Hurray! This module just made my day!

Working perfectly for me in IE!

Wish I could say hurray! Can anybody help...

Rob W. - October 9, 2009 - 18:48

I have a slide show with a transparent png over each image to display the text. Just can't seem to get it working with IE 5/6. I've tried multiple variations of CSS classes with PNG FIX. What am I missing?

Here's the site: http://dev.slyd.us/drupal/colbert/

belatedPNG another way of implentin PNG in IE6

dzieyzone - October 24, 2009 - 03:43

Try to follow on this issue http://drupal.org/node/611816. I posted another way of fixing PNG on IE6, it is an integration of DD_belated by drew diller, which I have asked permission to created a module for drupal already. It supports a:hover, image bacground positioning. Same configuration as PNGbehave where you just need to put the elements like jquery (img, li, div, #mypngId, .myClassId)