Cufon is messing up my transparent PNG backgrounds.

Question

I have a few divs with a repeating background PNG (that as an alpha channel set to ~50% opacity); the purpose is to give a white transparent background to the divs. The divs render great in all current browsers. But when I call my Cufon code to replace certain text on the screen, the backgrounds seem to fade out in a gradient fashion from top left to bottom right (in IE only). It doesn't seem to effect all PNG backgrounds, just certain ones.

Something with Cufon is definitely getting in the way of rendering the transparent PNGs. Has anyone ever seen this functionality?

Answer 1

I used cufón 18 months ago but that was for headings and labels over white or colored background so I can't help you on this one.
If I had a similar need today, I'd use @font-face as Fx3.0 and others are disappearing very fast, being replaced by Fx3.5+ and other recent browsers. Do you have a constraint that prevent you from using this IE-compatible feature?

A few questions if it can be of any help:

• do these elements have hasLayout (with zoom: 1; if they don't already have a width, height, ...) or their parents.
• is it always the same elements that work and don't work?
• what happens if you replace one background displaying OK with another that isn't OK? Is this the same element that have a problem or the same background or does something else happen?

Answer 2

Cufón wasn't causing the problem; it was just masking it. The real problem was the fact that I was using transparent .pngs that were 1px x 1px. IE will render them incorrectly and fade them out; almost as if they were being stretched beyond limit.

Answer 3

Use a larger background image - 10px X 10px or more.