25 February

Rod Hilton saves Star Wars

I linked to this on Twitter this morning, but it’s cool enough (and, dare I say, to the extent that Star Wars can be considered “important,” important enough) to link to here as well, just so it doesn’t vanish into the social networking ether.

Rod Hilton has devised an ingenious viewing order for the complete Star Wars saga. OK, actually not the complete saga, but what could come to be viewed as the definitive saga. He makes a compelling case for shuffling up the order a bit, and for removing The Phantom Menace entirely.

The ultimate sequence he devises is as follows:

  • Episode IV: A New Hope (or, more properly, Star Wars)
  • Episode V: The Empire Strikes Back
  • Episode II: Attack of the Clones
  • Episode III: Revenge of the Sith
  • Episode VI: Return of the Jedi

I’ll leave it to Hilton to explain in detail how he arrived at this solution, along with its (mostly) pros and (few, minor) cons. The whole post is definitely worth reading and I look forward to watching the “complete” saga in this order soon.

You’ve been RickRoll’d

Sure, it’s a dead meme, but the RickRoll was one of the best ever. According to an article on Slashdot, YouTube apparently pulled the video (for some reason) yesterday, but quickly put it back up in response to popular outcry.

I’ve been RickRoll’d myself a few times, but typically never bothered to watch more than 3 or 4 seconds of the video after being lured in, despite the soft spot I have for Rick Astley ever since I heard a friend simultaneously impersonate him and Michael McDonald.

Today I actually watched almost the entire thing, and was left dumbstruck at just how plain awful it is. Back in the late ’80s, by the time this arrived on the scene, I was so steeped in MTV culture (item! did you know MTV once showed music videos on a regular basis? it’s true!) that my mind was impervious to awareness of such ridiculousness. My senses were deadened due to overexposure. But now that a couple of decades have passed, I can look back and recognize the horrors of acid washed jeans, unnecessary trench coats, poofed-up pompadours, bad dancing, incompetent lip syncing and… well… absolutely everything else the director somehow managed to cram into this 3 1/2 minutes of misery.

Internet Explorer and transparent CSS layers

ie7chalkHere’s the scenario: I’m working on an image gallery for a client site, sort of a slideshow concept. The client wants the user to be able to click on the left half of the current image (“slide”) to move to the previous image, and on the right half of the current image to move to the next.

OK, no problem.

In the days of yore, I might have handled this with an imagemap. But my solution now, drenched in jQuery goodness, involves a pair of empty <div> tags, with set dimensions, absolute positioning and z-index in the CSS. These transparent <div>s are overlaid on the image, and the jQuery code triggers a refresh of the HTML code in the slideshow <div> itself, underneath, that contains the <img> tag for the current “slide.”

If you’re not a web developer that last paragraph is probably little more than a steaming pile of (to follow John Hodgman‘s lead) “bullroar,” but the point is that this allowed me to stick to semantic HTML (more or less — there is a chunk of JavaScript code directly in the page, but I may optimize that out of there soon), and keep most of the presentation in the CSS and the functionality in a separate JavaScript file, the way it should be.

Only it doesn’t work in Internet Explorer.

“It doesn’t work in Internet Explorer” is nothing new to me, and in fact I wasn’t totally surprised by that. My first hunch was that IE didn’t like the empty <div>s, even though they have dimensions specified in the CSS, so I gritted my teeth and stuck &nbsp; inside each one. Didn’t help.

Next I decided to make sure my dimensions were being interpreted properly, since it seemed clear that they weren’t: when I say it didn’t work in Internet Explorer, that’s only a half-truth. It didn’t work properly in Internet Explorer, but there were clickable areas on the slide — they were just really small and not in the right places.

So I set the background of the “previous” area to red and the background of the “next” area to blue. Reloaded in IE. Yep, the dimensions looked perfect — my photo was now covered precisely by equal-sized red and blue rectangles. And, curiously, the links worked properly now. I thought maybe it was just because I had added some CSS code for these <div>s in my IE-specific stylesheet (yeah, I do that… get over it). So I changed them both to transparent within the IE-specific stylesheet, and the problem reappeared.

And then, it hit me. No… could it be?

Yes, it could: IE was just ignoring the presence of those z-indexed <div>s simply because their backgrounds were transparent. This is probably a “known issue” with IE, but I had never had to deal with it before, and regardless, it sure as hell didn’t make any sense.

My solution? I went for a play straight out of the book of web design circa 1997: a one-pixel transparent GIF. Except I used a PNG, but same thing. I made a completely transparent image, and in the IE CSS file, I used that as the background for these <div>s.

Problem solved. But as is so often the case with IE issues, the solution is so bitterly unsatisfying, so fundamentally wrong, that there is no joy in its discovery. Just the impetus to blog about it.