Set width and height for the element/s containing the transparent background image [...] (also, bear in mind that the background images can no longer be tiled or positioned via ‘background-position’)

Apply  position: relative; to any contained links to ensure functionality

The first point means I’ll probably not bother trying to tile a drop-shadow background image to a variable length column again. Time to switch to progressive enhancement with Photoshop CS4/Fireworks/other tools’ ability to stuff alpha transparency into  regular PNG8 files.

The second point is probably the better answer to my last PNG problem post.

Main post about how to work with PNG24 alpha transparency and IE6 …

Shadowbox

Tooltip

highlightFade

http://jquery.offput.ca/highlightFade/old.php

jquery.validate.js

Lovely, lightweight carousel:
http://www.gmarwaha.com/jquery/jcarousellite/

http://www.noupe.com/jquery/50-amazing-jquery-examples-part1.html

http://www.jasonbradbury.com/

I’ve been so excited to be able to use full alpha transparency PNGs and getting them to play nice in IE6. Today I’ve found another PNG/IE6 issue. It seems that in some cases IE6 doesn’t like to have links in an element that is child of one with a background PNG to which filter:progid:DXImageTransform.Microsoft.AlphaImageLoader is applied.

The solution (in my case) was very simple: just needed to close the div for the background and add another for the links. Now the links just appear to be contained by the background.

CSS trickery: eat my heart out.

The Contenders

Slimbox

The true successor to the king (Lightbox). This is the chosen one. Very lightweight, simple instructions, does what it says on the tin. Simple instructions for when I’ve forgotten in two weeks are further down…

Shadowbox.js

This one seems to be the current best in breadth of options but too much to read for a low level webdev monkey like me.

Lightbox

The original – but perhaps no longer the beast.

Thickbox

Could have been a contender but I balked at the heavy graphic design.

FancyZoom

The one that started the search thanks to seeing it in action at this FontFeed article. Great tool – but as a webdev guerilla [read chimp] the commercial licence stopped me. Need a bit of slack before I can convince anybody to pay…

Slimbox walk-through

Upload css and js files – add these three lines of code to the head of the HTML:

<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/slimbox.js"></script>
<link rel="stylesheet" href="css/slimbox.css" type="text/css" media="screen" />

(The last slash there may want removing according to your doctype. Are you strict enough for it?)
Then craft the images links like this for single images

<a href="" rel="lightbox" title=""><img src="" alt="" /></a>

or, for sets, like this (where the rel attribute has the set name’s suffix)

<a href="" rel="lightboxset" title=""><img src="" alt="" /></a>