PNG Behave!

Corrects PNG alpha transparency in IE 5.5 and 6 using css behaviors instead of crawling the DOM.

Versions

• PNG Behave! for Drupal 7.x is now an officially supported branch of the 6.x-1.8 base.
• PNG Behave! for Drupal 6.x now has a 2.x-dev branch for testing the DD_belatedPNG lib, as well as an update to 1.8
• PNG Behave! for Drupal 5.x now has it's final *hopefully* update to 1.9

Features (For 1.x versions)

• Works with any elements.
• Works with backgrounds tiled, repeated, and stretched WITHOUT need for parent element confusion.
• Works with dynamically created elements that match the css selector string or directly call the behavior.
• Works on style AND class changes in runtime WITHOUT needing to call the script again.
• Works with auto height/width WITHOUT skewing. Issue:#342115: Padding causes elements to stretch
• Works in sub-directory drupal installations. Issue:#341710: Drupal installed in sub directory breaks PNG Behave!
• Padding may be applied to auto-size AND defined-size images without skewing or losing layout. Issue:#342582: Version 1.2 breaks defined sizes on PNG images, special thanks to Angus (here)
• IE6's BackgroundImageCache for faster repeat loading, and a few other speed based tweaks.
• Textareas for class selector lists #343681: CSS class/Selector input field is too short..., and...
• Exclude option for specifically ignoring classes.
• Detects IE 5.5 and 6 ONLY. Only IE 5.5 and 6 will use the behaviors to correct PNGs.
• Never worry about re-fixing a png again.

Features (For 2.x versions)

• Option to choose between TwinHelix or DD_belatedPNG scripts
• Option to turn BackgroundImageCache off

Share your Selector Strings and help us work toward a more automated system.

Installation

1. Upload to your modules directory (likely /sites/all/modules)
2. Activate module (admin/build/modules)
3. Set elements and classes to process (admin/settings/pngbehave)

Usage

Use a comma-separated list of CSS classes/selectors to make BEHAVE!.

To include all img, ul, and li elements

• img, ul, li

or a specific class:

• .star

or combination

• img, .star, ul, li, ul ul, div.star etc...

RECOMMENDED SELECTORS: img, ul, li, span .

NOTE: USING 'div' IS HIGHLY DISCOURAGED AS IT DRAMATICALLY INCREASES PAGE LOAD TIMES. Use more specific selectors if needed.

WARNING: USING '.block' WILL CRASH IE. Use more specific selectors if needed.

For Developers

• Apply the behavior myclass {behavior:url(/sites/all/modules/pngbehave/iepngfix.htc)} to specifically Include in the fix.
• Apply the behavior myclass {behavior: none} to specifically Exclude from the fix.

Roadmap

• Provide a way to create multiple classes. (could be useful for next idea)
• Provide checkboxes to enable class selectors known to work with certain modules. (many modules make high use of 'div' so having a way to automatically integrate their custom classes would be nice. i.e.: Fivestar Ratings)
• Considering a completely different Selector UI, suggestions welcome.
• More documentation and help.
• Collect links for this description to wiki terms and drupal nodes discussing the issue and providing other solutions.

Credits

Supported by Chris Paul and Wickwood Marketing
HEAD, 7.x, and 6.x branches maintained by Chris Paul (mrjeeves)
5.x branch maintained by Steve Wickham (wickwood)

The PNG Behave! module was developed using:

Pieces of the PNG Fix project,

as well as the behavior and tiling scripts from:

IE5.5+ PNG Alpha Fix v2.0 Alpha
(c) 2004-2008 Angus Turnbull www.twinhelix.com
Heavily Modified by Chris Paul (mrjeeves).

IE5.5+ PNG Alpha Fix v2.0 Alpha: Background Tiling Support
(c) 2008 Angus Turnbull www.twinhelix.com

DD_belatedPNG 0.0.8a (Only available in -2.x versions)
(c) 2008 Drew Diller www.dillerdesign.com

P.S. After 3 years of having kids (1 with a serious disorder), I am back in the game again.