So I’ve been more inburrito than usual lately, for a very good reason; I was moving. I’m just about done, though, so you’ll see me online at least a bit more soon, but I had to take the time to write about this now.

Unlike some of my friends, I am not a sandwich aficionado, and do not in general consider the sandwich one of the highest forms of prepared food. However, I do agree that just slapping some stuff between two slices of bread does not a good sandwich make, and that a properly calibrated sandwich can elevate your culinary experience from the mundane to the sublime. I’m writing today to talk about one of these sublime experiences. I walked over to my local Safeway a little while ago, thinking I’d just pick something up from the deli counter for lunch, since I have very few groceries in my new place, never suspecting that I was shortly to come away with what is possibly the best sandwich I have ever had. I am not kidding.

I ordered the “Hail Caesar” sandwich, which consists of a soft baguette (the bread makes the sandwich, and this one has some heft without being too tough or tearing up the roof of your mouth) with a garlic spread (think a thicker version of caesar dressing), turkey (but not too much; turkey’s aggressive blandness can overpower everything else in the sandwich if too much is added), havarti cheese (my very favorite, and the reason I chose this sandwich in the first place), lettuce and tomatoes. A very simple list of ingredients, but this is the textbook example of the whole being greater than the sum of its parts; tangy, flavorful, balanced perfection. Mmm! Ok, I’m going to go back and enjoy the second half of my sandwich.

Update 2009/09/12 09:19—The jQuery version of the dynamic z-index function has been optimized to use hover instead of mouseover/mouseout. Thanks to commenter Eric Conner for pointing out my mistake.

Update 2009/08/04 22:22—The jQuery version of the dynamic z-index function has been added.

Update 2009/07/09 10:52—The code has been updated to make use of the latest innovations in the Prototype library, and to take suggestions from commenters into account.

Now that we’ve officially transferred support of our big application from IE6 to IE7, I’ve been spending more and more time delving into the nitty gritty details of making that hugely complicated layout (recently made less complicated, but that’s another blog post) work in IE7.

I had thought, initially, that IE7′s superior CSS support would make my life a lot easier, and it did in some ways: my IE7-specific stylesheet is a fraction of the size of the IE6-specific one, and the ability to use attribute selectors is huge for me. But as I should have expected, I just traded one set of headaches for another. While IE7 is far superior to IE6 in terms of CSS support (and far inferior in other ways, user interface chief among them—but that’s another blog post, too), the bugs that still exist are more subtle and far more difficult to work around.

The IE z-index bug had been around since IE4 or 5, and was finally fixed in IE8. It’s still an issue in IE7, however, and chances are that you, the web developer, still have to support it. You should read Aleksandar Vacić’s in-depth characterization of the problem to really understand what’s happening, but what it boils down to is this: the CSS 2.1 spec says that a positioned element with any integer z-index value (i.e. not auto) should create its own zero-based stacking context, and use the integer value specified to decide its place in its parent stacking context. In other words, if the positioned element has a z-index of auto, its stacking context is inherited from its parent. Internet Explorer, however, creates a new stacking context for elements with any z-index value, including auto, which wreaks all kinds of havoc and generally causes mayhem in your previously neat and orderly layouts.

(more…)