What happened was, I saw this this cool article in A List Apart about how you can do drop-shadows on pictures and text using pure CSS techniques. I thought the little picture to your right would be improved thereby, so I cut-n-pasted the code and made some changes to fit ongoing better. It worked perfectly in Safari first time. It blew up in Mac IE but who cares. It worked fine in Windows IE. It broke in a very irritating way in Mozilla on all platforms. I blew about three hours one afternoon fiddling with margins and padding and this and that, getting more and more furious, snarling at my loved ones, and achieving exactly nothing. What ya gonna do? Who ya gonna call? (The story has a happy ending).
Dave Shea · Well of course I’m Vancouver and we happen to have our own local CSS deity here; of course I’m talking about the CSS Zen Gardener.
It took Dave about an hour to sort things out, and the problem turned out
to be that the picture (with the drop-shadow) was slightly wider than the
<div> it was sitting in, and the different browsers have
different error-handling modes. Hard to complain too much.
The interesting thing was watching Dave track down the problem, and we agreed that he really ought to write a piece on “CSS Debugging Tips.” Here’s one tip for free: borders. Dave put a blue border on the image and a red border on the drop-shadow, and that let us see what was going on (not why, but still a good first step).
I wrote laments about the weirdness of wrangling CSS in March, May, and October last year, and I stand by the general proposition that CSS is harder than it needs to be. But it’s still a lot better than the alternatives, and ongoing proudly remains an all-CSS effort.
The Changes ·
I used the drop-shadow graphic from that ALA article but found it way too
light so I darkened it up a bit; obviously a matter of taste.
Also, I found the white border he put around the image to be a distraction so
I nuked that. However, the idea of having a grey (#a9a9a9)
one-pixel border between image and drop shadow works like a champ.
Thanks once again to the invaluable List Apart.
