CSS Drop Shadows II: Fuzzy Shadows

by Sergio Villarreal

80 Reader Comments

Back to the Article
  1. i didn’t use the technique in the last article because the edge was unrealistic. this is much better.
    kudos. also in the first example… no hard edge shadow. checked it on Mac and PC…
    Copy & paste the code below to embed this comment.
  2. I too had trouble getting the previous version to render to my liking. This renders much better. Thanks…
    Copy & paste the code below to embed this comment.
  3. The last example doesn’t show softened edges on my IE version (6.0.2800.1106.xpsp2.030422-1633) running on WinXP Pro sp1. Has this been checked to run on IE6? What else could be wrong?
    Copy & paste the code below to embed this comment.
  4. now that I look more closely, in IE6, no fuzzy shadow for me either… same version as oVan.
    Copy & paste the code below to embed this comment.
  5. Here’s one I was going to write an article on: #topShadow { width: 225px; background-image: url(images/shadow_top.png) ! important; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader »(src='images/shadow_top.png',sizingMethod='crop'); background-image: none; } Basically by declaring the the first background-image “important”, Netscape/Moz and other compliant browsers (Safari) ignore any other declarations.  No version of IE recognizes the important attribute.  So it turns off the background-image.  Which is good cause otherwise you get two background-images over lapping each other. I was working on this for some old code on an older site using tables and it worked fine.  I then reproduced the menu using more CSS friendly code for the ALA article I was going to write.  At which point the links broke in IE.  When you remove the DX code, they work again.  So something with the DX code and the way I wrote the CSS broke the links in IE.  I’ve been trying to find a solution and haven’t been able too.  Anyone have any ideas?
    Copy & paste the code below to embed this comment.
  6. Whoops, I forgot the link: http://www.megasmack.com/pngexample/final.html
    Copy & paste the code below to embed this comment.
  7. I tried copying this stuff to my site, but I don’t want my <div> to float:left, and the drop-shadow doesn’t render in Safari.  Any ideas? http://raibledesigns.com/page/rd?anchor=css_drop_shadows
    Copy & paste the code below to embed this comment.
  8. There are a few errors in the markup, which is why currently IE is not actually displaying the fuzzy shadows and the first example’s hard shadow is a no-show. I’ve reported this to the editors, and all should be well in a while.
    Copy & paste the code below to embed this comment.
  9. Never produce an ALA issue when you’ve been sniffing glue. We apologize for the production errors and believe they have all been fixed.
    Copy & paste the code below to embed this comment.
  10. No fuzz here either. Works in Mozilla 1.6 just fine (naturally).
    Copy & paste the code below to embed this comment.
  11. I just checked in IE 6 Win98 and not only is there no fuzz but no offset either. Otherwise, very nice. Looks real good in Firefox.
    Copy & paste the code below to embed this comment.
  12. Ok. Dan Benjamin ( http://hivelogic.com/ ) and I worked on the quirks for a while. It’s been fixed. Apparently, the url structure for the AlphaImageLoader filter does not follow *all* the rules for url specifying in CSS, so IE was getting confused with the ALA directory structure and couldn’t find the offset PNG image. Everything should look just fine now. If you have problems with this, try to keep a simple directory structure (the example code should work just fine).
    Copy & paste the code below to embed this comment.
  13. In opera 7.11 can’s see anything… just the image with a white padding and 1px border, nothing else no shadow @ all
    cheerz
    Copy & paste the code below to embed this comment.
  14. Yep, it works in IE6 now.
    Copy & paste the code below to embed this comment.
  15. If you’re making an image that has to be the same colour as the background anyway, why bother with pngs at all? Nice hint with the AlphaImageLoader directly into css though. Thanks.
    Copy & paste the code below to embed this comment.
  16. James: The PNG transparency here is necessary just to make the shadow dissolve. Without PNG transparency that effect couldn’t be accomplished, because the shadow is clipped at that point. Panta: I’ve tested the technique in Opera, and it works fine. I’ll recheck it later to make sure.
    Copy & paste the code below to embed this comment.
  17. My point is that you could use a solid gif image of the fuzzy end of the shadow to clip the the shadow.
    Copy & paste the code below to embed this comment.
  18. James: No, that wouldn’t work. If we had used a GIF, we’d have to have had another hook (extra div), or live with a crappy shadow border. The thing is, you can’t predict the size of the block, so if your offset image is a GIF it has to be a continuous “shadow end thingie” (like the PNG). That solution doesn’t produce a fuzzy shadow. It produces a “shadow that ends in an ugly thing that seems to emulate a degradation but doesn’t pull it off”. Another possibility is to have an extra hook. Then, you could indeed just make two GIF’s that represent the fuzzy borders and affix them to top-right and bottom-left of your divs. That would work, but you’d end up with three divs around your image instead of two.
    Copy & paste the code below to embed this comment.
  19. I hadn’t run across this article in my quest for drop-shadows for images, and I was unhappy with most options I found… so I created a little hack to make dynamic shadows, sized appropriately for any image, as shows on the URL included here. For static HTML I could have just put the background-image() in the CSS, but since the page is generated and the background-image URL is dynamic, I attach a style attribute to each element to get the appropriate shadow. (Disclaimer: this site most certainly does not work in IE, but the shadows themselves should I would think) I became interested in the shadows themselves, so I made this page to facilitate mindless hours of enjoyment.
    Copy & paste the code below to embed this comment.
  20. This URL: http://msqr.us/ma/BrowseAlbums.do?key=MKhjolwv8mi0shtSpSXJLWt7xGs which shows the dynamic shadows in action.
    Copy & paste the code below to embed this comment.
  21. You are of course right. I should really stop and think more… The way I see it, if you’re already using 2, what’s an extra one gonna change? The snobs will already be choking on their noses and you avoid the extra markup the IE hackerage takes up. I suppose this would balance out with a lot of shadowed images weighing down the code with their uncached <div></div>. Well, on further reflection; good article, chum.
    Copy & paste the code below to embed this comment.
  22. It should be noted that, if you don’t want the “frame” provided by the image border and padding, you can actually pull this off with just one <div>. You’d just set the PNG as background of the image and give it the appropriate padding. I didn’t do that because, quite frankly, the naked images with shadows don’t look so good. Just a thought.
    Copy & paste the code below to embed this comment.
  23. I followed the tutorial but seem unable to get the grey border around the image working in IE6. It wokrs fine in Firefox and if I adjust padding within the class .alpha-shadow img, Firefox responds fine. However IE6 does nothing. Anyone has any idea what went wrong?
    Copy & paste the code below to embed this comment.
  24. Matt: Most likely, you don’t have a correct doctype specified. Make sure you’re using a correct doctype for XHTML 1.0 Transitional or up. If you don’t do this, IE 6 reverts to quirks mode and does what IE5.5 and IE5 do with the padding of images with border (namely—nothing).
    Copy & paste the code below to embed this comment.
  25. I’ve not tried it, but it looks like Dean Edwards’ IE7 server-side compliance patch should make this work fine, without worrying with any javascript.
    Copy & paste the code below to embed this comment.
  26. Mentioning that HTML is disabled would be sort of handy.
    Copy & paste the code below to embed this comment.
  27. Re: sergio: Another possibility is to have an extra hook. Then, you could indeed just make two GIF’s that represent the fuzzy borders and affix them to top-right and bottom-left of your divs. That would work, but you’d end up with three divs around your image instead of two. I supposed, it looks like this?
    http://phoenity.com/tests/fuzzy_shadows.html
    I think this is (a bit much) better, though non-semantical, because I don’t quite like that extra ie.css ...
    Copy & paste the code below to embed this comment.
  28. Yup, I guess it looks *exactly* like that =) Great job. There are about a million ways to skin this particular cat. I went the way I did in the article because I sort of dig the combination of techniques that lead to the effect. If I could, I’d have done it in under a <div>. Still trying…
    Copy & paste the code below to embed this comment.
  29. Thank you very much for the tip! It solved my problem and everything is working fine now! Take Care!
    Copy & paste the code below to embed this comment.
  30. By the way: If you use the effect for thumbnails of a gallery (using the images to link to bigger versions), you can enclose the image in the anchor, set the anchor’s display property to display:block; and use it as the middle <div> (thus pulling this off with just one <div> and cheating a bit).
    Copy & paste the code below to embed this comment.
  31. great article. gotta love the drop shadow cats too :)
    Copy & paste the code below to embed this comment.
  32. This is much better than the previous article. Thank you so much.
    Copy & paste the code below to embed this comment.
  33. Works fine and looks nice
    Copy & paste the code below to embed this comment.
  34. Nice article, but I wanted to say the biggest thing I took out of this was the conditional comments on IE. This was the first I had heard of this, how long has it been floating out there? I haven’t had a chance to play with this yet, but doesn’t this seem like the best way to avoid all the IE hacks (box model, etc.) rather than confusing the compliant CSS? Drawbacks:
    1) You would have to make two stylesheets (but that second one would be pretty easy to make), 2) All of the folks using IE would have to download two stylesheets instead of one the first time they visit your site. (That seems like a small price to pay if you’re going to use IE…) Am I missing something? Why hasn’t this been talked up?
    Copy & paste the code below to embed this comment.
  35. “Am I missing something? Why hasn’t this been talked up?” I have no idea. I try to tell everyone I know, but damned if people just don’t want to hear. You’re right, this is a far better way to deal with IE’s broken box model since it relies on a *feature* of the browser rather than a *bug*. Cool drop shadows sergio. Now if you could just figure out a way to make it work on any color background ;-)
    Copy & paste the code below to embed this comment.
  36. Looks great on Netscape and Explorer 6.
    Nice code to use.
    Copy & paste the code below to embed this comment.
  37. Re: sergio: By the way: If you use the effect for thumbnails of a gallery (using the images to link to bigger versions), you can enclose the image in the anchor, set the anchor’s display property to display:block; and use it as the middle <div> (thus pulling this off with just one <div> and cheating a bit). Like this?
    http://phoenity.com/tests/fuzzy_shadows_anchor.html
    Copy & paste the code below to embed this comment.
  38. Yeah, I hadn’t heard of Conditional Comments either, until I started research for this article. Perhaps they will take… Who knows? They could be the new black. Lim Chee Aun: Not exactly. What I meant was to remove the middle <div> and apply that style to the anchor instead. Glad people liked the article. And the cats. Can’t go wrong with cats. Or monkeys.
    Copy & paste the code below to embed this comment.
  39. With all possible respect to the authors of this article, I must, however, admit that creating “inverse” shadows, in my honest opinion, defy the whole idea of true alpha layer transparency, which is supposed to allow us, little eveil web designers, use PNG images over any underlaying visual stucture.
    YoungPup’s solution for IE 5+ was around for 3 years now:
    http://www.youngpup.net/2001/sleight
    All you have to do is create a “yourfuzzyshadow.png” image, and position it under whatever element you want to have a drop shadow.
    As for creating dropshadows for images, the easiest way to ensure consistency would be to make dropshadow (and border, if any) a part of the image itself. The default “sizingMethod” of “Microsoft.AlphaImageLoader” filter is “image”, which will display the image without cropping or scaling it.
    Copy & paste the code below to embed this comment.
  40. I may get flogged for this (hence the pseudo-name) by why do this?  there is such a thing as the right tool for the right job.  if you want a drop shadow on an image, use your graphics program.  you already used it to create/edit the image, haven’t you?  it’s just 2 more steps to add a drop shadow.
    Copy & paste the code below to embed this comment.
  41. http://www.alistapart.com/discuss/cssdrop2/3/#c7885 Eric said: >> Mentioning that HTML is disabled would be sort of handy. ALA forum says, at the top of every forum page: >> Discuss this article. HTML tags and entities display as source; they do not render. To create a live link, simply type the URL (including http://).
    Copy & paste the code below to embed this comment.
  42. ben http://www.alistapart.com/discuss/cssdrop2/4/#c7905 said: >>I may get flogged for this (hence the pseudo-name) by why do this? there is such a thing as the right tool for the right job. if you want a drop shadow on an image, use your graphics program. you already used it to create/edit the image, haven’t you? it’s just 2 more steps to add a drop shadow. You might do it on a dynamic site the client will edit via CMS. The client’s staff aren’t graphic designers in this scenario; they are content creators — editors and writers with some web tech expertise. They’ll be putting up new images every day. The drop shadows are part of the look and feel you’ve designed for the site. The client lacks the ability (or time or budget) to create drop shadow effects for 25 new images a day. The client doesn’t HAVE to do that work, because this technique ensures that a plain image inserted into the content will show up with a drop shadow. That would be one reason why. Similarly, we often create border and padding effects in CSS so that all images will appear to have, say, a colored border. The client may have no graphic design expertise at all, but that’s okay; the CSS does the work. Make sense?
    Copy & paste the code below to embed this comment.
  43. iG.STUDiO, all, I enhanced Youngpup’s Sleight (first in summer last year, n) so it also works with background styles (demo see attached URL). This code has recently been integrated into the already aforementioned very nifty IE7. http://dean.edwards.name/IE7/ I like the generalised Javascript approach to fix IE’s shortcomings much better than handcrafting custom CSS for each project; and nothing’s going to deliver us from that shoddiness but taking the fortune in our own hands. If you know how to solve the outstanding problems or have ideas to contribute, get in touch with Dean. He’s a cool guy.
    Copy & paste the code below to embed this comment.
  44. apartness, I have a site that generates dynamic content much like you mention, and my solution was to write a little server-side code to generate the shadows dyanmically. Thus the HTML and CSS is very, very simple and the shadows get sized dynamically. Check out http://msqr.us/shadows/ as an example page I set up.
    Copy & paste the code below to embed this comment.
  45. msqr: I checked your solution and it looks nice, but doesn’t work in Explorer (any version). The PNG’s have a gray background and show the shadow over that.
    Copy & paste the code below to embed this comment.
  46. Hmm, they don’t work in IE, no. I’ll check that out. Once again IE makes things difficult.
    Copy & paste the code below to embed this comment.
  47. it doesn’t works for xhtml
    especially when u specify this before the doctype:
    <?xml version=“1.0” encoding=“UTF-8”?>
    Copy & paste the code below to embed this comment.
  48. Sergio, I threw in the IE PNG filter stuff to make the dynamic shadows work with IE… try again with http://msqr.us/shadows/.
    Copy & paste the code below to embed this comment.
  49. What’s this ? another article on how to make the web a holly mess!!!! <div class=“alpha-shadow”>
    <div>
    img/test.jpg
    </div>
    </div> WHAT THE HELL IS THIS???????
    SHAME ON YOU….you self proclaimed web evangelist!!!!! i agree that W3C specifications are important to the web evolution….but the good attitude remains “IF YOU CAN’T MAKE SOMETHING WITHOUT MISUSING THE LANGUAGE ... DON’T DO IT!!!!” with such usage of <div> you show the world that your understanding of W3C recommendation is the understanding of a 2 years old Boy!!! a few years ago everybody was yelling at the guys from microsoft because of their implementation of HTML which was very exotic .... but doing such things you are doing the same….AND PERHAPS YOU ARE DOING WORTH. pffffff….i’m depressed…i don’t wish you a nice day Web evangelist???? no, WEB TERRORISTS !!!
    Copy & paste the code below to embed this comment.
  50. In all truth, hangon, I just do it to piss you off =) I am glad that I am doing WORTH. Always good to contribute something (if that was not your intended meaning, I suggest you revise your understanding of the English spec). That was a joke right? Just in case it wasn’t: The spec allows for that construct. It’s perfectly valid, if not semantically correct. We work with what we have.
    Copy & paste the code below to embed this comment.
  51. hilarious isn’t it? :D
    Copy & paste the code below to embed this comment.
  52. Well done on the article, and thanks for the name drop. I especially like the conditional comments thing. Now, how about another comic strip?
    Copy & paste the code below to embed this comment.
  53. Nice work and thanks for the acknowledgements. On my site I have another working example based on the new article:
    http://jotbe-fx.de/daily/photos/
    Copy & paste the code below to embed this comment.
  54. http://www.alistapart.com/discuss/cssdrop2/5/#c7906 apartness said: >> ALA forum says, at the top of every forum page: ... So, what’s it doing at the top, when the text entry field is at the bottom? How about it right next to the “Add your comment:” line?
    Copy & paste the code below to embed this comment.
  55. ... but I wasn’t satisfied by the answer I read regarding why CSS shadows are preferable over manipulating the images directly. If you think of your images as content, then it’s easier to understand the advantages of doing this with CSS.  As the look & feel of your site changes, so may your taste in image treatments.  By relying on CSS to handle these treatments, you aren’t forced to re-process all of your site’s images. On the downside, this particular treatment requires some rather unintuitive nesting of the <image> tag within two levels of <div> tags.  While the exercise of “massaging” HTML markup to make it stylesheet-friendly has been more or less accepted by designers, we must also accept that it deviates from the general philosophy behind CSS.
    Copy & paste the code below to embed this comment.
  56. Opera 7.0 PC doesn’t render the drop shadows in the last example image the cat) - This is probably triggered by the “float:left” property in the .alpha-shadow div {} declaration.
    Removing the float should fix it.
    Copy & paste the code below to embed this comment.
  57. Then the IE 6 will probably not show the left and top right fuzzy edges anymore when the float:left has been removed. Including the float:left into the special ie.css with the filter style will work.
    Copy & paste the code below to embed this comment.
  58. The good news: there is a CSS3 standardized method for this (the box-shadow property)
    The Bad News: no browser supports it yet
    Copy & paste the code below to embed this comment.
  59. I have been following this discussion for several days now, and I am still confused about the original idea.
    I will have to repeat myself:
    1. PNG’s alpha transparency is supposed to allow us grater flexibility in positioning images over anything else, while maintaining simplicity of markup.
    2. The situation with IE support can be resolved by many means (I still like the elegance of Aaron’s “Sleight” JavaScript behavior), here is an example:
    http://homepage.mac.com/igstudio/design/css-js-dropshadow/shadow-png.html
    3. If we still have to match background color with GIFs, we could achieve the exact same results with a lot less effort by arranging elements in a table (yes, table - last time I checked it was still a legitimate HTML element - and, yes, it does support CSS formatting, so the separation of content and presentation shouldn’t be a problem):
    http://homepage.mac.com/igstudio/design/css-js-dropshadow/shadow-gif.html
    Look… no JavaScript, no conditional comments, no separate stylesheet… I can go on.
    Please, explain to me, somebody, why we feel the need to scratch our left ear with our right foot? When nestind empty (therefore, not content-bearing, therefore - presentation-specific, so where is a separation?) DIVs became a better way of design than saving the coding efforts and assuring better browser compatibility by using (dreadful) table, which was created to retain rows-columns positioning by design, and perfectly works?
    Forgive me for being fossil, I just want to understand…
    Copy & paste the code below to embed this comment.
  60. iG.STUDiO: This particular approach was intended to minimize markup and maximize control of the effect. Here are some of the motivations behind my decisions: - I don’t want to resize an image with the scale control of the AlphaImageLoader filter. Mainly because it does an incredibly shoddy job (yes, I am very anal in design matters). Pixel perfect shadows is where it’s at for me.
    - I wanted good enough results for IE5.
    - I had already done another article on using one <div> to achieve a similar effect.
    - I use this technique all the time in my site ( http://overcaffeinated.net ), inside my posts. I don’t want to put a table in there, and two <div>‘s are acceptable to me.
    - I dislike rewriting html documents with javascript. It’s perfectly valid, but it doesn’t rock my boat. I don’t think this particular technique amounts to waving a dead chicken over the code, and I find it interesting how many people are complaining about it like it’s a signal of the apocalypse. There is a reason this is a *followup* article. This variant may not be for everyone, but people who like their shadows fuzzy and their markup clean may have an interest in it.
    Copy & paste the code below to embed this comment.
  61. I forgot: The technique doesn’t use javascript, and it degrades well. I like to write things that don’t make lynx/w3m/cellphones go berserk.
    Copy & paste the code below to embed this comment.
  62. “Hide a stylesheet from non-IE browsers so it doesn’t affect document validation.” That’s great and all, so is this method. But isn’t the whole point of sites like ALA to promote standards? What’s the point of a hack that breaks standards? Even if it is for IE… whose lax PNG support also irritates me!
    Copy & paste the code below to embed this comment.
  63. Sometimes ALA authors get lazy and quickly jump to switching stylesheets ans hiding them from some browsers, which in my view should be a last resort.
    Copy & paste the code below to embed this comment.
  64. Sometimes ALA authors get lazy and quickly jump to switching stylesheets ans hiding them from some browsers, which in my view should be a last resort.
    Copy & paste the code below to embed this comment.
  65. I should stop making comments for the simple sake of not offending anybody. Please… I didn’t mean to, I just wanted an explanation, sorry, if it sounded a bit critical (I like your website… :) :) :) ). And I didn’t diss your code, Sergio, I merely asked how and why did you arrive to this point.
    I think, that was Igor Stravinsky, who said once something like this (very loose quote): “If I had no limits to my resources, I would probably ended up not writing anything”.
    I think, I see it now. You don’t want tables, so you didn’t use them. I must admit (thanks to a slow day at work), this could really be fun:
    http://homepage.mac.com/igstudio/design/css-js-dropshadow/shadow-div-gif.html
    (for some reason - poor CSS support in this particular part? - IE5.2 for Mac breaks the display, but who cares, it’s dead anyway… It works in IE6 Win, Firefox, and Safari, though)
    Once again, sorry, if my comments sounded apocalyptic…
    It’s all good. Keep up the good work.
    PS. The table-based markup is still shorter. Not cleaner, oh, no, just shorter…
    Copy & paste the code below to embed this comment.
  66. I’m all for CSS advancement but this seems a bit overkill since a regular image with a drop shadow will achieve the same thing - without the fancy tricks. Trying to hack this or that just to satisfy browser quirks is not practical in this case. I’ll wait until CSS 3 is more widely adopted.
    Copy & paste the code below to embed this comment.
  67. We use a separate images server on our site and this: .img-shadow div {
      filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘http://images.ourdomain.com/shadow2.png’, sizingMethod=‘crop’);
      background: none;
    } does not seem to work.  Is there any way to use teh alpha transparency hack in IE on a “remote” image?
    Copy & paste the code below to embed this comment.
  68. We get a suprisingly large chunk of Netscape 6.0 visitors to our sties.  My site and your dropshadow example both fail to show the shadows in Netscape 6.0.  I don’t know if this is related but the “Acknowledgements” text is positioned on top of the Free Cat picture. This drop shadow method works well in all other browsers and let’s out content writers quickly add some style to a otherwise flat page.  Thanks for the help.  I don’t understand why all the backlash against this technique.  It’s give us the flexability of applying drop shadows we need wherever we want without resorting to complex table designs.  Our graphic designers don’t have to waste time making two verisons of every image, and our content writers love the new trick they can pull off.  It’s valid, doesn’t use javascript, and isn’t to size intensive. Kudos ALA!
    Copy & paste the code below to embed this comment.
  69. Yep, it does. lots of lovely fuzz ...excellent article Sergio!
    Copy & paste the code below to embed this comment.
  70. Quote: “I’m all for CSS advancement but this seems a bit overkill since a regular image with a drop shadow will achieve the same thing - without the fancy tricks. Trying to hack this or that just to satisfy browser quirks is not practical in this case. I’ll wait until CSS 3 is more widely adopted.” It could be useful for a number of reasons…. i use it for a content management system where teh client can upload (varying sized)pics to his site, but he hasn’t the software or knowledge to give them drop shadows, this allows him to keep the pretty wee drop shadows that he so dearly wanted…
    Copy & paste the code below to embed this comment.
  71. John, I had the same problem with Opera 7.0 but fixed it with “br clear=all” and “clear:both” properties for several HTML elements. In fact I don’t have the Netscape 6 on my machine but my photo site should work on it. You might check it and then have a look at the source.
    Copy & paste the code below to embed this comment.
  72. Does this technic or a similar one work for tables ? Thanks.
    Copy & paste the code below to embed this comment.
  73. It’s definitely a cool technique, but I really think it’s a lot of effort (and discussion) over a teeny, tiny bit of return. A poster early on said that the hard-edged drop shadows were too ugly to use, but now that they are nicely fuzzy they like them. That’s just TOO much attention to detail for me.  I think my attention is more productively used elsewhere on site design & maintenance. But the article WAS well written, and I appreciate the effort that went into it. T.
    Copy & paste the code below to embed this comment.
  74. I can’t get this to work under xhtml strict or 1.1 - I get an ugly lower padding for the inner div… if I do padding: 0px 5px 5px 0px;  the Safari and Firefox don’t display properly… if I do padding: 0px 5px 0px 0px; then IE doesn’t display properly… any ideas?
    Copy & paste the code below to embed this comment.
  75. OK, I wrote too soon: the shadows work fine in strict xhtml if you add the following to the img css: vertical-align:bottom; (leaving padding: 0px 5px 5px 0px; for the div). I actually discovered the answer on http://phoenity.com/tests/fuzzy_shadows_anchor.html - thanks to Lim Chee Aun who was the only person I found to implement a version of Sergio’s method in STRICT rather than transitional…!!!
    Copy & paste the code below to embed this comment.
  76. this thing isn’t working for me…
    can you check it at http://radon.ytra.net/css/ ?
    thanks
    Copy & paste the code below to embed this comment.
  77. Try removing the » character from your CSS code. That one got me too. But I’m having a problem, I’m not getting the rounded corners when I do this through an external CSS file. Works fine when done from the head though… Bizarre????
    Copy & paste the code below to embed this comment.
  78. http://homepage.mac.com/igstudio/design/css-js-dropshadow/shadow-gif.html
    Copy & paste the code below to embed this comment.
  79. Great article. It seems that I’m suffering the same as Mr Schrab (http://www.alistapart.com/discuss/cssdrop2/#c7860) - I’ve got a css defined nav bar from an unordered list, but as soon as I pop in the DX code the links stop working in IE! Could someone please help?
    Copy & paste the code below to embed this comment.
  80. Hi, ALA rulez!!
    Question: I float an image and making a border is no prob. The drop shadow won’t float because I already used a float Should I use two div’s to overcome this problem? t
    Thx for any help. CU
    Chazz
    Copy & paste the code below to embed this comment.