Here's an example of the drop shadow in action. The full CSS is listed below.
To my knowledge this technique works perfectly in IE6Win, Firefox/Mozilla,
Opera, Netscape 6 (after a weird delay), Safari, Konquerer and even IE5Mac.
IE5.5Win renders the border and shadow nicely but neglects the white backdrop
(a lack of padding). IE5Win neglects the white backdrop and the shadow (a lack of everything).
Keep in mind that CSS background properties will always override the Alpha Filter, so your background needs to be clear in IE5.5 and IE6. Every other browser will ignore the filter, but it won't validate. Not sure if there's a easy fix for that.
The other interesting point to note is the 'sizingMethod=scale' part
of the filter. Unlike CSS, the filter image can not be
positioned relative to it's parent container (e.g. left/right/bottom/top etc),
so what you're seeing in IE5.5 and IE6.0 is the PNG being scaled to squish
into the available DIV space -- that explains it's darker appearance in those
browsers.
You could certainly consider using a second, smaller PNG that is scaled closer to the actual size of your images. I haven't bothered.
.dropshadow{
float:left;
clear:left;
background: url(shadow-png.png) no-repeat bottom
right !important;
/* respectful browsers (e.g. Firefox/Opera/Safari)
ONLY take notice of this line*/
background: none;
/* disrespectful browsers clear the background graphic, in this case allowing
the alpha filter to work in IE5.5 and 6 */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,
src='shadow-png.png'); /* the MS alpha filter */
margin: 10px 10px 10px 15px;
}
.dropshadow img{
position:relative;
bottom:6px;
right: 8px;
border: 1px solid #eee;
border-color: #eee #888 #666 #ddd;
background:#fff;
padding:8px 6px 15px 6px; /* gives us the white area - but not in IE5 + IE5.5
*/
margin: 0px;
}