I found myself thinking of A List Apart’s CSS Drop Shadows, and decided I’d modify my writing portfolio to use actual drop shadows instead of the clunky border mess I’ve had for the last few years.

The first thing I realized was that the technique isn’t suitable for large, arbitrarily-sized regions, because you need to have a background image as large as or larger than the area being given the shadow. When you’re trying to apply it to most of the page, you need a multi-thousand pixel image. That’s not only hard to work with, but even if it compresses well it’s still going to take up a lot of unnecessary room in the browser’s memory.

I wanted to keep the markup simple, so I shopped around a bit more and came across a CSS drop shadow example at W3C which was very simple: all you do is put a shadow-colored div behind the area and mess with margins.

Well, that worked great in Mozilla, Opera, Konqueror and Safari. Then, the dreaded Internet Explorer test.

No dice. IE on Windows has a problem dealing with negative margins (which explains why it thrashes the layout on my software page). It shrank the containing div down to one line, but spread its background all the way down, and duplicated the top of the inner div so that there were two borders. (Note that IE for Mac worked fine.)

So I thought, how about using positioning instead of margins? That actually worked, keeping margins intact and everything. So I had a simple drop shadow that worked in all the major modern browsers! Next step: What would it do in Netscape 4?

I’m at the point where I don’t worry about design appearing right in Netscape 4, I just worry about the content being visible and clickable. If things don’t line up, or the background is missing, I don’t mind, but if you can’t read it, or you can’t follow navigation, I try to fix it. Well, Netscape 4 is picky about applying background colors, and it had decided to show only the shadow’s background color — which, of course, was black, the same color as my text! Fortunately, there is a very simple, validating hack to hide CSS rules from Netscape 4, so I used the Caio Hack to hide the background color for the shadow div.

So now I’ve got a test page that looks good in all major modern browsers, and is at least usable in Netscape 4 (for the die-hards who won’t or can’t upgrade to Netscape 7.1 or Mozilla). I proceed to update all my pages to add the nested div. Story done, right?

Of course not! The first problem was with IE, which took some files – but only some – and actually double-layered the text! After a bit of experimenting I realized it was only doing it to the largest files, and it seemed to be wrapping the text around from the bottom to the top as if it had some sort of maximum length on nested and/or relatively-positioned blocks. It looked just like a sheet of paper that’s been run through the printer twice. By this time I wasn’t really interested in starting over with a new design, so I just added another class and reverted those pages back to a shadowless layout.

So was I finished now?

No, Netscape 4 – despite being fine with the page I had used for testing – was royally messing up the rest of the pages, somehow deciding that a negative position for the left edge of the inside block should be measured against the right edge of the container instead of the left. And once you move something in NS4, chances are the links either haven’t moved or have moved somewhere else. So I had unclickable menus off at the right edge of the page instead of the middle, and poems you couldn’t see without scrolling to the right. Very much not in the mood to fsck around with this, I just moved all the positioning inside the Caio hack.

Done?

Nope! A few pages have images floated off to the right. IE/Win would flash the image briefly, then paint the background over it. Really. On the one page where the image matters, I just resorted to a table. A table inside an otherwise CSS-based layout, just because one browser is too buggy to display floated images right.

Now, let’s go back to the beginning. Remember, I wasn’t trying to do anything complicated. The HTML change consisted of going from <div>...</div> to <div><div>...</div></div> — that’s all — and the CSS change consisted of (first try) setting margins or (second try) setting positioning. Mozilla, Opera, Safari and Konqueror all got it right the first time. Not once did I have to tweak anything. But IE/Win and NS4 both exploded, repeatedly.

Microsoft, unfortunately, has the browser market sewn up and has gotten lazy. I wouldn’t mind so much if they were willing to fix their bugs, but they aren’t. These aren’t new or advanced standards I’m working with here, these are basic features that have been around for 7 years. I can understand Netscape 4 screwing up — it’s old, and the only reason I’m even bothering is that so many people were scared off of upgrading by the crap that was Netscape 6 or the hardware/OS requirements for the much-better Netscape 7 and Mozilla. But IE 6 is supposedly current (even if they haven’t done much with it but plug security holes for the last few years). It ought to be able to handle this stuff.

This minor site upgrade should have been a half-hour project at most, instead of using up an entire evening and prompting me to write several pages detailing the experience.