Fixing Transparency in IE6
Fixing Transparency in IE6
9th
MarYou’ve created this really great design and everything looks just like the treatment the client approved in all other standards compliant browsers, but then they come back and say “By the way, it has to work in Internet Explorer 6 as well.” Great, here comes hours of debugging and a separate style sheet on top of that. And what are you supposed to do about all those 24bit PNGs with transparency you’ve used?
History
I have tried several solutions like using the
AlphaImageLoader
filter in an IE6 specific style sheet, TwinHelix’s IE PNG Fix, Unit Interactive’s Unit PNG Fix and a number of others, but none of the fixes worked for every situation. These solutions worked well except when used withbackground-position
,background-repeat
and elements with thea:hover
pseudo-class.A better solution
DD_belatedPNG, written by Drew Diller, is a Javascript library that uses Microsoft’s implementation of VML (Vector Markup Language) instead of Microsoft’s
AlphaImageLoader
filter. It works by adding a line of CSS to the document via the DOM which acts as a MSIE-proprietary behavior (Javascript expression) that gets bound to the elements on the fly.I’ve used it on a number of sites and have found that transparent images used with
background-position
,background-repeat
anda:hover
behave and display identically to modern browsers.Usage
Implementing the fix is pretty straight forward, albeit you’ll want to use a conditional comment to keep other browsers from loading unnecessary code.
- Download a copy of the Javascript file.
- Refer to the file in your code (see code example below). It’s good practice to put Javascript at the end of the document just before the closing
</body>
tag.- Next add a function that calls to
DD_belatedPNG.fix()
- Replace your_argument with either a CSS selector
('.class')
, DOM element('a, div, ul')
or even a group of selectors('.class, .class-two, #id')
.Code Example
<!--[if IE 6]> <script type="text/javascript" src="DD_belatedPNG.js"></script> <script> DD_belatedPNG.fix('your_argument'); </script> <![endif]-->A little advice
I would caution against just using DOM elements as this triggers the fix() for every reference of the element in the HTML document, including elements that do not contain transparent PNGs. If you do decide to use them, absolutely do not use
('body')
as an argument. Just don’t, Chicken Little, the sky is falling, the whole bad enchilada.Last bit
There are still a few issues, like
<tr>
,<td>
and<input type="image"/>
not working, but for the most part this is the best solution to transparent images in IE6 that I have found to date.Written by Brian Rhinehart
Brian Rhinehart is a freelance designer, illustrator who has been working in the media and design industry for the past sixteen years. When he’s not working for clients, he spends his time illustrating or maintaining Illustration Toolbox, an inspiration gallery and blog dedicated to all forms of illustration.
About this entry
You’re currently reading “
- Published:
- 10:29
- by nathski
0 Comments (Post a Comment)