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:
#bodyNote 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#containerdiv#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
to be more clear, by digging
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?
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
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-capNicolas
-------------------------
http://nic.ipwa.net
Again about background images
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
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
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
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
Does anyone have an answer to this? I'm having the same problem.
Hurray! This module just
Hurray! This module just made my day!
Working perfectly for me in IE!
Wish I could say hurray! Can anybody help...
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
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)