PostsYou know that one browser that has only a vague association with modern web standards? Yeah, Internet Explorer. Wouldn't it be great if it supported stuff like translucent PNGs? Well, now you can add decent PNG support to IE5.5+ on Windows with no changes to your website HTML source code.
The script we're featuring in today's column, created by Angus Trumbull from TwinHelix, will add near-native PNG support with full alpha opacity, with only one line in your CSS file, that applies to all <img> tags and also background images!
The way this solution works is a bit different from the other fixes you'll find here and there, because you don't have to insert any <script> tag into your HTML pages. All is done at the CSS level, using CSS behaviors, a custom Microsoft extension to CSS.
Of course, as such, it will not affect any other browsers like Mozilla and Opera which already implement good PNG support. It will also not help IE4.0 and IE5.0, which don't include the necessary IE filter, and does nothing with IE5/Mac (which natively supports translucent PNG foreground images, however).
Getting the snippet to work requires four easy steps:
- Download the tiny module (iepngfix.htc) from TwinHelix' website
- Upload the snippet and a blank .GIF image to your server
- Into the snippet code, edit the blankImg variable so it points to the blank .GIF
- insert the following rule into your main stylesheet:
img { behavior: url(iepngfix.htc); }
However, there are certain limitations:
- Can't help IE versions prior to 5.5, sorry.
- 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.
- It's most reliable on elements with non-'auto' dimensions set. So, give images and other elements width/height values; '100%', '10em' and '200px' and so on are all OK.
- Background PNG images can't be tiled. This is a limitation of the IE filter.
- Similarly, padding and borders don't indent the PNG image. An easy fix for this is wrapping your PNG images in container DIVs or similar.
- There may be about a short time as soon as the image loads when images are not transparent, before the IE filter kicks in.
Enough talk, time to get it!
17.04.08 |
CSS |
1 |
del.icio.us •
Stumble •
Digg •
Technorati
