Shadowed Box

Container with its own shadow (via pngs)

The point of this exercise is to use PNG images (and the full alpha channel they provide) as background images. I know there are other ways to make shadows...

All elements with the .bdr class have a behaviour applied .. which will take effect in IE5.5+. (only) Other browsers are assumed to support PNGs properly, or allowed to degrade.

The behaviour will apply the AlphaImageLoader filter to elements with a currentStyle.backgroundImage property, which looks like a .png file.

The border itself is drawn in the old fashioned way with a table. This is unavoidable (I think) as we want the content area to be flexible in height, and the AlphaImageLoader filter will cause problems if it's applied to an element with content you actually want to be able to click on. Also note that the filter doesn't replace all the options you get with a css background - no tiling, no positioning. There are 3 options for the sizingMethod attribute (which gets set in the behaviour): crop the image to fit the element box, scale the image (stretching as necessary to fill it), or resize the element to fit the image (image)

Problems

Table markup. This is all tied into the clickable link problem associated with using the AlphaImageLoader filter... so if I can fix that problem, the need for tables goes away - I can use any of a number of css techniques to draw the borders with background images.

Little gaps - rounding errors? I added an alert to the .htc, so you can see it loaded and the filter applied progressively. See (in win IE5.5+) the lines in there? I'm seeing a little gap where the background fill doesn't quite meet the next element. I don't think this is a markup error - I've recreated the same page using plain .gifs instead and they don't appear. Is there a rounding error, or some other reason? It seems to come and go depending on the height of the element. This is what I'm seeing: