What is this?
This is a IE5.5+ "behavior" that automatically adds near-native PNG support to MSIE
5.5 and 6.0 without any changes to the HTML document itself. Supported features
include:
- Automatic activation of transparency for PNGs in the page.
- Support for <IMG SRC=""> elements.
- Support for background PNG images (unlike many other scripts!)
- Support for CSS1 background repeat and position (via optional add-on)
- Background images can be defined inline or in external stylesheets.
- Automatically handles changed SRC/background via normal JavaScript (e.g. mouseover
rollovers) -- no special coding needed.
- Change support includes CSS 'className' changes on elements.
- Incorporates automatic workaround for <a href=""> elements within PNG-background
elements.
- Tiny script (for fast downloads).
- Licensed under a Free Software license.
How To Use
Follow these simple steps to add this to your page:
- Copy and paste
iepngfix.htc
and blank.gif
into your website
folder.
- Copy and paste this into your website's CSS or HTML:
<style type="text/css">
img, div { behavior: url(iepngfix.htc) }
</style>
That CSS selector must include the tags/elements on which you want PNG support --
basically, give it a comma-separated list of tags you use. It must also include
the correct path to the .HTC relative to the HTML document location (not
relative to the CSS document!). For instance, yours may look like this:
<style type="text/css">
img, div, a, input { behavior: url(/css/resources/iepngfix.htc) }
</style>
- If your site uses subfolders, open the .HTC file in a text editor like Windows Notepad
and change the
blankImg
variable to include a correct path to blank.gif
like so:
IEPNGFix.blankImg = '/images/blank.gif';
Again the path is relative to the HTML file. Otherwise, you will see a "broken image"
graphic!
- If you want support for CSS1 background-repeat and background-position, make sure
you include the add-on .JS file in your
<head>
:
<script type="text/javascript" src="iepngfix_tilebg.js"></script>
Otherwise, background images will work but won't repeat or position.
- Sit back and enjoy! Perhaps consider making a
donation to support this script's development if you like what you see, as I
have spent hundreds of hours developing, testing and supporting it :). Alternatively,
I would certainly appreciate a crediting link on your site back to mine!
If you are interested in more details or an alternative activation method for the
script that maintains CSS validation compatibility, see the source code to this
demonstration file.
How to fix common problems
- I've pasted in the CSS but my PNGs aren't transparent!
-
Make sure you remember that the path to the HTC file is relative to the HTML file,
not the CSS file (like CSS background images are). If you want to test the path,
insert this:
alert('This works!');
into the .HTC file.
- It works offline but not online.
-
First try unzipping this default demonstration and uploading to your web server
as-is. If it doesn't work, you may have a MIME type problem. You must ensure your
server is sending the correct MIME type of "text/x-component" for .HTC files. Try
one of these two easy fixes:
- Upload the ".htaccess" file from within this script's download ZIP to your webserver,
which will make Apache send the correct MIME type.
- Instead of calling "IEPNGFIX.HTC" from your CSS, upload IEPNGFIX.PHP to the same
folder and call that instead, which also sends the right MIME type.
- My PNGs are transparent but have a funny border or red "X" icon.
-
Check that the
blankImg
variable is set correctly in the .HTC file,
again this should be relative to the HTML document containing the PNGs.
- Images are distorted, or this script breaks my page layout.
-
When applied to images without set dimensions, this script will try and "guess"
the correct image size and apply that. If it gets it wrong, give your images a definite
width
and height
.
- Links or form elements within a PNG'd element aren't clickable.
-
Due to an IE bug, if you are putting links within an element with a transparent
background, the element must not have a CSS relative/absolute position.
Otherwise the links will likely be un-clickable. The script will warn you with a
popup alert dialog if this occurs. There is an excellent article on
PNG filters and links you might want to read if you are a CSS expert that
contains more info and workarounds.
- It works, but breaks another application like Google Maps on my page.
-
You'll need to stop applying this behavior to the third-party element that presumably
contains its own PNG fix. Try making your CSS selector more specific, or put a manual
override for the element in your CSS like so:
* html div#map img { behavior: none;
}
- I have IE6 installed "alongside" IE7+, and this script fails.
-
Either try on a computer with IE6 installed system-wide, or make sure that you copy
the required DLLs into your IE6 folder. You will need
dxtrans.dll
and
dxtmsft.dll
for filter support, try Googling for them or finding them
on your Windows install CD. They must also be the "version 6" DLLs, not v7+, to
work with IE6. Note that I can't support your setup here, sorry!
- I have lots of images and page loading is slow.
-
With a lot of images, it can certainly slow down your page! Make sure that you apply
the script as narrowly as possible. Consider applying only to elements of a particular
CLASS perhaps, rather than all tags. Also, make sure that you are not trying to
tile a 1x1px PNG background over a large element, as this will bring the browser
to its kness -- make your images a little larger if you run into this :).
- The browser is making hundreds of extra HTTP requests.
-
See this MSDN
HTC bug report for the details and a workaround. The same technique might
prove handy with the BLANK.GIF file too if that's your problem.
- The MIME type and path are right, but the core script won't load online.
-
Check that your server isn't sending the HTC file GZIP-compressed. This can break
IE6, it seems.
- It still won't go.
-
Try running the self-test at the bottom of the list of demo images. If that throws
any errors, you'll know where to start fixing!
Limitations and known isses with the script
- Padding and borders don't indent the PNG image and can sometimes contribute to the
distortion problem. An easy fix is to use 'margin' instead.
- A:HOVER transparent images are not supported out of the box. If you want this functionality,
I recommend you download the excellent
Whatever:hover script. This script will then enable :hover PNG background
changes on all page elements when both are applied to the page.
- IE 4.0/5.0 are not supported. MSIE/Mac has native support for IMG SRC but no background
PNG support. The scripts does nothing in MSIE7 as it supports PNGs natively.
- Users can't right-click-save processed PNG images, they'll save the blank GIF file
if they try that. In some cases this might be a feature, not a bug...
- The script detects the ".png" extension in image URLs. So if you have a CGI script
that generates a PNG image, you may have to rewrite parts of the script, or just
cache them as PNG files somewhere.
- There may be about a short time as soon as the image loads when images are not transparent,
before the IE filter kicks in.
License:
IE5.5+ PNG Alpha Fix
(c) 2004-2009 Angus Turnbull http://www.twinhelix.com
This is licensed under the GNU
LGPL, version 2.1 or later.
If you want to link my site or make a
donation, you're more than welcome :).
Tech Specs
IE5.5+ includes support for a DirectX
AlphaImageLoader filter, that can take an element on the page and insert
a correctly-rendered PNG image inbetween the element's content and background. This
script automatically scans all IMG SRCs and element backgroundImages for .PNG files,
and if it finds them, it removes the regular image and substitutes this filter in
place. See the source if you want, but I've coded it quite compactly to keep download
time down to a minimum (at the expense of comprehensibility, sorry!).
Changelog
- v2.0 Alpha 4<
- Made blankImg pathname relative to the HTC by default.
- Added Macromedia rollover script compatibility.
- Fix for tiled backgrounds in elements with padding.
- Initially "display: none" PNG images now show once visible.
- Documentation updates.
- v2.0 Alpha 3
- Changed activation method so inline LI elements etc. work OK.
- Script now handles dynamic element width/height changes.
- Added .update() method to the background tiler that will update all elements on
the page (called automatically on window resize).
- Restored "scale" sizingMethod for IMG SRC elements.
- v2.0 Alpha 2
- Fixed issue with positioning non-repeated backgrounds.
- Fixed typo in child-link-fix function.
- Fixed background-position changing via className (so 'CSS sprites' should now work).
- v2.0 Alpha 1
- Complete rewrite into an object-based pattern.
- Support for CSS1 background repeat and position.
- Performance improvements via toggling of the 'onpropertychange' hook.
- Activation of the script via 'oncontentready'.
- Slightly enhanced self-test mode.
- Numerous other minor tweaks.
- v1.0 Final
- Loosened IMG SRC matching regex slightly.
- Script exits gracefully when IE filter isn't installed (e.g. IE on Linux).
- Unclickable child fix now checks for pre-existing absolute/relative position.
- Added className switch demo and self-test debug mode.
- Documentation changes.
- v1.0 RC5
- Added support for CSS className changing of background images.
- The script now detects element's background-repeat and sets the PNG sizingMethod
to 'crop' or 'scale' automatically.
- Enhanced link fixer to cover many clickable elements, and added popup warning dialog
when the fix cannot be made.
- Support for PNG backgrounds behind GIF/JPEG images (e.g. dropshadows).
- Script sets display:inline-block automatically on inline elements.
- Loosened the URL matching rules, now any URLs with a .PNG in the path are activated,
so /cgi-app/foo.png?date=123 will now work without modifications.
- Now works with the 'Whatever:hover' behavior to support :HOVER changing of background
images on page elements!
- Simplified and reorganised portions of the script, especially the background image
changer.
- Included demo .HTACCESS and .PHP files for sending the correct MIME type for servers
where this is an issue.
- Rewrote the documentation, now it's understandable by human beings.
- v1.0 RC4 and earlier