You've probably wondered if software development has stopped on this website. OK maybe you haven't. In any event, it hasn't. But most of the visible features have been stabilizing, so the bigger changes are mostly going on behind the curtain.

The CSS subsystem has gone through the most radical change in the last week or two. That's the part which controls the overall look of the site - fonts, colors, etc. Most of the old-timers know that you can access this site from a few different URL's and each one provides a different flavored experience. That hasn't changed. What has changed is that now the style sheets are truly cascading. You can access some of these different flavors right here right now. There's a new 'Theme' link on the menu. Try it. Granted my theme selection isn't all that great, but this too will change - just like everything else. 

The other big headache I've been fighting is drop shadows. If you are viewing this site with firefox, you may notice that most of the pictures have a little shadow behind them - making them stand out from the page. You've no idea what a can of worms was involved in doing this.

There are lots of ways of doing drop shadows using CSS. Most of the websites you see out there which use drop shadows are doing it with CSS. But there's a catch. The CSS to create a drop shadow relies on a  CSS property called 'float' to make the shadow stick to the image and not go wandering away. Float is evil. It has all kinds of side effects which aren't very nice. Images jump their surrounding divisions. But the nastiest side effect is that it doesn't work if your image is centered on the page. Most of my article images are centered. 

You can get around this limitation of float by enclosing the image (and its shadow) in a table. I experimented with doing this. Yay. The CSS drop shadows all work. Boo. The images are no longer in the center of the page. Why not? Tables have their own positional elements. If you enclose a table in a div that's centered, the table won't be. You need to center the table on its own. My solution to make the site look normal again was then to add tables to everything and then center all the tables. But not all the images are supposed to be centered. You can put smiley faces in the text. Let's ignore the fact that drop shadows don't look right on the smiley faces because they don't have square corners. The big problem is that if all the tables with images are centered, the smileys will end up on the wrong place on the page. That is unless I parse the article, find out where all the images are and then find out which ones are centered and which ones aren't.

This is a lot of work just to make a shadow.

The way I've been doing shadows which aren't affected by position and layout is to run all the images through a script which creates the shadows on the fly. The shadow isn't part of the HTML page, it's part of the picture. This works great for preserving the layout.

But the problem here is the corners. If all the images were on a white background, or the same color background, it would be fine. But they aren't. So the shadows look unnatural unless I make the corners transparent. What's wrong with doing this? Nothing really. Except if the picture is a JPEG. JPEG's don't do transparency. GIF's do. GIF's are great for simple logos, but they are limited to 256 colors. 255 if you count the transparent pixels. They aren't very good for photographs. Ahh, but nowadays we also have PNG. PNG is good for photographs, and it has transparency. Cool. I have a solution. Right?

Nope. Microsoft's browser doesn't handle transparent PNG's easily (I ranted about this a week or two ago in my weblog). That's why you currently won't see the cool drop shadows if you are using IE.

The other problem with PNG images is that they're huge compared to JPEGs. Ten times as big. Granted, they don't lose pixels either, but that's the price you pay for lossless compression. Big files. So my cute little drop shadows make the page take twice or three times as long to load.

Is there any way around that? Why yes. CSS drop shadows.

I've got a vicious circle going on now. There's no good way to have drop shadows which just work all the time on any page background and any browser and any image layout. It's just not possible.

I've been banging my head about this for a couple of months now. I finally went back to dynamic shadows and to heck with IE. It's all wasted effort. Or it will be. Drop shadows are supposed to be a property of CSS itself. You should be able to specify it just like a border. The only problem is that even though this has been defined by the W3C, no browsers have yet implemented it. None.

But someday they will. And when they do, all of the work I've done to make pretty shadows will have been wasted. So to take a cue from J Barksdale - "Rule #2. Don't play with dead snakes."

This snake is dead. It's about time I stopped playing with it. So for today, you'll have cute shadows in Firefox. But the pages will load more slowly than if you use IE. In IE the pages won't look as nice. And that's the way it's going to be until everybody implements CSS shadow properties. Or, if I finally get tired of the whole mess and just dump the shadows completely.