PNG Behave!

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

Features

• 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!
• As of version 1.3, 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)
• Version 1.4 introduces IE6's BackgroundImageCache for faster repeat loading, and a few other speed based tweaks.
• Version 1.5 introduces textareas for class selector lists #343681: CSS class/Selector input field is too short..., and...
• New! 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.

NEW! PNG Behave! for Drupal 5 by Steve Wickham (wickwood) of Wickwood Marketing
is now an officially supported module branch. See releases below...

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.

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 Tomadoh and Wickwood Marketing
HEAD 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

Releases

Official releases	Date	Size	Links	Status
6.x-1.7	2008-Dec-15	12.48 KB	Download · Release notes	Recommended for 6.x
5.x-1.8	2008-Dec-15	12.57 KB	Download · Release notes	Recommended for 5.x