« November 2006 | Main | January 2007 »

December 31, 2006

links for 2007-01-01

December 30, 2006

links for 2006-12-31

December 29, 2006

links for 2006-12-30

December 28, 2006

links for 2006-12-29

December 27, 2006

links for 2006-12-28

December 26, 2006

links for 2006-12-27

December 25, 2006

links for 2006-12-26

December 24, 2006

links for 2006-12-25

Notes on getting PNG transparency in IE6 with pure CSS

Recently, I started building a site with a lot of transparent image elements. The trouble was the the client required support for IE6 as well as IE7. Now, IE 6 and lower do not support transparent PNGs out of the box, but I knew that there were workarounds for that.

The question was, which workaround to use? One method I saw involved using an Explorer "behavior." Unfortunately, this solution required loading and HTC file, which is an ActiveX control. ActiveX controls aren't loaded in IE6 with default security settings. Maybe there is a workaround for that, but I couldn't find it in a timely fashion. Besides, the HTC solution requires an HTC file and a special GIF file be stored on the server. Adding mysterious stuff to the client's file tree is something I really like to avoid.

Then I ran across a brand new article (based upon a much older article) at A List Apart: Super-Easy Blendy Backgrounds. This article describes a pure CSS technique of getting image transparency to work in IE 6.

The core of the solution is as follows:

  • First wrap the PNG in a div,
  • then create a separate style sheet for IE 6- using conditional comments.
  • Within the IE6- stylesheet, give that wrapper div the style "filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='PATH_TO_PNG', sizingMethod='image');"
  • Then set the width and height of the wrapper div to the width and height of the PNG.
  • Lastly, hide the PNG itself by giving it display: none.

As I understand it, the way all of this works is that AlphaImageLoader displays the specified PNG as the background-image of the wrapper div; and AlphaImageLoader respects PNG transparency. The problem is that the physical PNG image overlays the wrapper div, effectively hiding the transparent background PNG. Hiding the original PNG with display: none solves that.

I did learn a couple of things while implementing this solution:

  • When specifiying a relative path to an image for the filter, use the relative path from the PAGE WHERE THIS CSS IS CALLED, NOT THE PATH FROM THE CSS FILE ITSELF, as you would be when specifying a background-image: url, for instance.
  • You MUST specify width and height for the container div, or the image will not show up.
  • I also used image instead of scale for my sizingMethod, because I wanted my PNGs to behave just like regular images, not to scale to the size of their container.

December 23, 2006

links for 2006-12-24

December 22, 2006

links for 2006-12-23

December 21, 2006

links for 2006-12-22

December 20, 2006

links for 2006-12-21

December 19, 2006

links for 2006-12-20

December 18, 2006

links for 2006-12-19

December 17, 2006

links for 2006-12-18

December 16, 2006

links for 2006-12-17

December 15, 2006

links for 2006-12-16

Internet Addiction

The Web is a medium, like television and cinema are media. But paper, ink and oil paint are also media. Do we talk about "drawing addiction?" How about "newspaper addiction?" Not really. Only new media are addictive -- only electric media -- technology.

I'm not disparaging Marie Winn, I do love her vision of TV as the natural medium of the commercialized counterculture. But is that wrong?

There is an unfortunate dogma in the arts, that newness is cheapness. Now, I love the new, and I love the cheap. But just because I have to plug my media into a power outlet, that alone doesn't cheapen anything. At least for me.

December 14, 2006

links for 2006-12-15

December 13, 2006

links for 2006-12-14

December 10, 2006

links for 2006-12-11

December 09, 2006

links for 2006-12-10

December 08, 2006

links for 2006-12-09

December 07, 2006

links for 2006-12-08