You may know that the filter "alpha(opacity=100);" in IE changes the intensity of an object. What you might not know is the PNG image has the ability to change its own opacity as well. This tutorial teaches how to apply such an image as a background of a table. So effect like this can be reached on not just IE but ALL BROWSERS!
In addition to the fact that all browsers support this trick, it changes only the opacity of the background. IE filter would change the opacity of everything that is in a table cell which gives you less control.
Everything will be cool if IE correctly supports partly transparent PNG. It does not so we must find ways around it. Regular img src or background does not show the transparency of PNG file correctly. IE uses a AlphaImageLoader filter. It's a dumb solution and in fact there's a petition for proper PNG support in IE for Windows. As long as IE developers don't plan to make improvement, we will have to rely on this trick to make partly transparent PNG correctly show in IE.
This trick is written by Erik Arvidsson. There are also different tricks but I find this easiest to install. He modifed the css behavior of img to allow IE to use its AlphaImageLoader filter to load all PNG files while other browsers maintain the original code. His code works only with img tag. I modified his .htc file to allow the same replacement in the background tag.
1. First download my .htc file.
2. Put the following code somewhere in your css definition:
td {
behavior: url("pngbehavior.htc");
}
3. Make a table with no bgcolor whose background image is a partly transparent PNG file. For example:
<table width="50%" align="center" cellpadding="0" cellspacing="0" border="0" style="border: solid 1px #CECECE"> <tr> <td background="whitebk.png" valign="top"> This is your partly transparent layer! This is your partly transparent layer! This is your partly transparent layer! This is your partly transparent layer! This is your partly transparent layer! This is your partly transparent layer! This is your partly transparent layer! This is your partly transparent layer! This is your partly transparent layer! This is your partly transparent layer! This is your partly transparent layer! This is your partly transparent layer! This is your partly transparent layer! This is your partly transparent layer! This is your partly transparent layer! This is your partly transparent layer! This is your partly transparent layer! This is your partly transparent layer! This is your partly transparent layer! This is your partly transparent layer! This is your partly transparent layer! This is your partly transparent layer! This is your partly transparent layer! This is your partly transparent layer! This is your partly transparent layer! This is your partly transparent layer! This is your partly transparent layer! This is your partly transparent layer! This is your partly transparent layer! This is your partly transparent layer! This is your partly transparent layer! This is your partly transparent layer! This is your partly transparent layer! This is your partly transparent layer! This is your partly transparent layer! This is your partly transparent layer! This is your partly transparent layer! This is your partly transparent layer! This is your partly transparent layer! This is your partly transparent layer! This is your partly transparent layer! This is your partly transparent layer! This is your partly transparent layer! This is your partly transparent layer! This is your partly transparent layer! This is your partly transparent layer! This is your partly transparent layer! This is your partly transparent layer! This is your partly transparent layer! This is your partly transparent layer! This is your partly transparent layer! </td> </tr> </table>
4. As part of the bargain, you MUST make sure your pngbehavior.htc is where your html file is and ALSO there must be a competely transparent file named spacer.gif in your directory. This is because the .htc file replaces the background source with "spacer.gif" in IE.
5. Of course to make the task meaningful, you should have a background for your html body so you can tell the table background is semi transparent. Something like this!
While doing my layout, I realized using alphaimagefilter on td tag makes links inside the td quit working (they appear as links, but don't respond to mouse clicks or hovering). This site discusses the problem and some of its solutions.
The solution I picked is a simple one. I've decided to apply alpha filter in IE and use a trick to stop the child elements from inheriting the alpha filter. NO MORE pngbehavior.htc necessary! This is a lot easier!
1. Put the following code somewhere in your css definition:
.trans_box2 {
border: 0px;
background-image:url(images/whitebk.png);
/* Mozilla ignores crazy MS image filters, so it will skip the following */
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
}
/* stop child elements inheriting the parents alpha opacity in ieWin */
.trans_box2 * {
/* A position:absolute or position:relative is required for ieWin to actually set the filter? */
position:relative;
}
2. Then put
class="trans_box2"In your td tag!
3. Then it should look like this! EASIER? :) download my new demo now.