How about background PNGs?

I am also having trouble getting this module to work on CSS background pngs. The version of the script on the home page is the same as the script which is shipping with this module, so the module seems up to date.

Regarding Argentofchange's question about listing all the divs that have pngs, what I have been doing is to include an extra class in with all the applicable divs on my page, (call it something like "qtpng") and that way I only have to have one or two entries in the Administer > Site configuration > PNG Fix CSS classes field.

I'm thinking that this will allow the script to run faster also, since it only needs to find one or two classes per page, rather than searching the entire page for a long list of classes.

(But I am very much a newbie, so I've probably missed something here!)

I'm also having trouble getting this to work. The site URL is www.charlestonelementary.net . I'm using a modified Zen theme and the PNG in question is in the closure. The image is inserted into the Zen CSS file under "#closure-blocks" which is what I put in the Administer > Site configuration > PNG Fix CSS classes field. I'm testing this out in IE6 and it's not working. I'm not sure what else to do. If anybody could offer some guidance I'd very much appreciate it.

"#closure-blocks" would be an ID, not a class

I made a page design which was pretty much all 24bit alpha transparent PNGs set as the background of a DIV

after installing the PNG fix and setting all the classes I used in the settings, it would still crash my IE6

but then again, the testpage on the project page also crashes my IE6, so I just gave up and went looking for an image processor to remove the transparency and just parse the images relative to the background color as the page is loading up, which would still leave me with a flexible page where colors can easily be changed without having to change 17 images

it ain't a perfect solution, but I don't think 24bit alpha transparent PNGs will ever be properly supported, so I'ma try to refrain from using them and just use a collation of overlapping-single-pixel GIFs or something

I fixed this by using div.pngfix instead of just pngfix in the admin settings. If you take a look at the home page for this script and view the source. You'll see the js at the top is applying the fix to div.example Where example is the class name of the div surrounding the images that need to be fixed. This works for every type.. even background images.

This is referenced in the documentation, this seems to be a common problem but it has a solution, so marking this as closed.

This fix does not work for me. I would like to apply the fix to a div id that has a background image defined in the stylesheet.

my html:

my css:

what I've tried in the PNG Fix settings:
div#pagecontainer
#pagecontainer
div.pngfix (while adding a class definition to the div in my html - div id=pagecontainer class=pngfix)
.pagecontainer
div.pagecontainer

No matter what I try it still doesn't work.

I did a demo for this, to finally put this to rest, I'll update the documentation tomorrow. If your is the first tag inside your body, which I suspect it is because of the id name, you need to just add body to the settings form.

Under the form you see these instructions:

Comma seperated list of CSS classes to apply the PNG Fix to (use jQuery Selectors). The CSS class must be for the element that surrounds the image, and not for the image itself. In the case of , use .pngfix to apply the PNG Fix to the image.

What it should really say instead of classes y selectors. So you need to add to the settings the container of the selector you have your png in and not the actual div (or whatever) that has you png as a background. In your case the container is the body tag, which we can use in CSS as a selector so we can add it there.

I'm changing the component to Documentation and once this is *really* clear in the documentation I think we can mark this as fixed.

so if the PNG is set as a background to the body tag, u'r screwed? or should u specify the html tag as a selector then?

Hi all, on D6.6 I added "body" and all the links are inactive. My site is like flatten jpg under IE6.
Any suggestions?

thx,
b

that's sort of exactly what I expected when setting the PNGfix to rather top lvl html elements like the body or html tag

Yeah? So how to set up divs png backgrounds ?
When I set div or * or body - my site is blocked, inactive, but png are transparent.
When I set #footer or div#footer , and the same for the rest of divs my site is working but is not transparent.
Any ideas ?

Drupal 6.6 and last PNGfix for D6.

Perhaps we should add some usage examples to the documentation.

Example 1:

example1.html

The snippet that should be added in the PNGfix interface:

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

example2.css

The snippet that should be added in the PNGfix interface:

#body is used here again, because it is the element that immediately surrounds the element containing the transparent png.

@benone
I'm getting exactly the same problem, did you ever find a fix for this, I've tried all of the suggestions mentioned

@gthing Thanks a lot for this example.
This worked for me following your #contentbox example
I have successfully got transparent PNGs (background and IMG SRC) to display on the same page. :)

However, now that the transparency works, IE is stretching my background image horizontally (which doesn't happen with the blue-silver background before the PNFfix...)
Never seen this before.. anyone?
Thanks again for ur help.
pl

@pierrelord
I'm having the exact same issue.

Did you ever figure out what's causing this? Or a fix?

Thanks.

@AaronLBorg & @pierrelord, I'm enjoying the same problem: stretched background images.

@AaronLBorg & @jjaa - never fixed this issue.. had to work around - not pretty. sorry
http://jquery.andreaseberhard.de/pngFix/ - this page tells u that it takes BG images, but will scale them, so not sure there is a fix.
would love to know if anyone has solved this - thx

This is not a bug in the module. There is no fix for transparent repeated background images in IE6. If you apply a transparent filter to a background image in IE6 it stretches the image to the width of the container.

This developer's alpha 2.0 version of a png fix for IE claims to have background position & repeat solved:

http://www.twinhelix.com/css/iepngfix/

http://www.twinhelix.com/test/

I have tested it, though, and I'm sure it's an insanely convoluted fix, but I just thought I'd throw it out there. Fully in love with this module, btw.