The incredible ever-changing page background

Here’s more stuff that web designers might find interesting and everyone else will find either irrelevant or won’t even notice.

I kind of liked the abstract image I had as the background of the pages in this new site design (which, if you’re interested, can still be found on my IE6 users’ “welcome” page), but I was never completely satisfied with how it was just shoved into the upper left corner of the window. So I took a horizontal cross-section from a very colorful portion of that design, stretched it out into blurry vertical stripes, and made it the new background.

But, you may notice, there’s a bit more to the background than that. Once again it’s the magic of PNG alpha channel transparency at work.

The background of this page is actually the product of 3 separate images (a JPEG at the “back” and two transparent PNGs over it) overlaid on top of each other. In the bottom layer is the aforementioned blurry multi-colored vertical stripe image (JPEG). It’s 1600 pixels wide by 20 pixels high, tiled.

Next above that is my “Close to the Edge” image, a gradient from the teal of my color palette (at the bottom) to transparent (at the top). For a while I toyed with simply using this as a teal-to-black gradient, and I have to say it looked quite nice, but there’s not enough else going on visually with the design of the page, so a solid black band at the top of the page came off a bit boring. So, the gradient as an overlay on the stripes. This image is 50 pixels wide by 600 pixels high, and it’s fixed to the bottom of the window and tiled horizontally.

Above that is the (probably overused) “NTSC scanline effect” image, which produces the horizontal stripes. Unnecessary and as I said, probably overused, but it’s still kind of cool looking. Or would have been in 1998 at least. Call me old fashioned, if you think 1998 is old. (OK, in the web world, it’s ancient history.) This is a 20×20 image, also tiled.

So, how does this all fit together? Well, the way I do it is by applying the JPEG to the <body> tag, which is immediately followed by a pair of nested <div> tags that fill the window and exist for the sole purpose of overlaying the other background layers. Then inside of that, the rest of the page’s HTML appears as normally.

Looking at it precisely, the CSS file contains the following:

body {
  background: #000 url(“images/body_bg_stripes.jpg”) top left repeat fixed;
  margin: 0;
  padding: 0;
#body_overlay {
  background: url(“images/body_overlay_bg_ctte.png”) bottom left repeat-x fixed;
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
#body_overlay_2 {
  background: url(“images/scanlines_25_black.png”) top left repeat fixed;
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;

And the HTML for the pages follows this basic structure (with lots of stuff cut out in this example, of course):

<div id=”body_overlay”>
<div id=”body_overlay_2″>

What’s really cool about this is that it results in a background pattern that, as a single image, would need to be at least 1600 pixels by 600 pixels (in other words, very large in both dimensions and file size), and even then it would not be able to achieve exactly what you see here because the gradient is fixed against the bottom of the window. In fact there’s absolutely no way to produce the background of this page without transparent PNGs. The 1600×600 image would easily be a few hundred kilobytes at a fairly low-quality compression level — far too big to justify, especially since it would still end up looking like crap. But as it is, the three images are 6857, 135, and 714 bytes respectively — less than 8 kilobytes combined. Sweet! (OK, it’s pathetic that I think something like this is “sweet,” but there it is.)

OK, I’m convinced Steve Jobs fired all of his UI designers in a fit of rage…

Much has now been written, a smidgen of it by me, regarding the various design faux pas committed by Apple with Leopard, but here’s another new inexplicable one I just noticed:

Weird drop shadows in Mac OS X Leopard

What’s wrong you ask? Well, if you think about it, this just plain makes no sense. I’m not complaining about the weird blur effect on translucent elements in this new version (although that bugs me too). It’s this bizarre drop shadow on the little slide-down alert dialog box. Why is there a drop shadow here? Presumably it’s to make us realize this dialog is attached to the window (as they’ve been ever since Mac OS X debuted, albeit without a gratuitous shadow). But the effect is to make it look like the title bar is casting the shadow. Yet, the title bar does not cast a shadow on the rest of the window itself. So it therefore appears that the dialog is recessed below the window itself. And yet, the dialog casts a shadow on the window as well. It’s M.C. Escher’s worst nightmare. As others have already said about other UI elements in Leopard: Why, Apple? Why?

On the other hand… I have to admit, I’m actually starting to like the translucent menu bar. The horror!!!

Print (or save) that photo!

It’s come to my attention that printing from the new Gallery tool on the Offspring page is not as easy as it could be. Paying for Shutterfly prints is an option, of course, but you can also print the images right from the site or save them to your hard drive. Here are some instructions…

1. Click on the picture you want to print, so it appears by itself on the page in the larger size.

picture-1.png2. In the gray area above the picture, on the right side, you’ll see the date, owner, and size information. There’s a menu that allows you to pick other sizes to view, and the “full size” appears below that as an orange link (see picture). Click the orange link next to “full size.”

3. The page will reload displaying the full-size picture, which will most likely be too big to fit in your browser window.

4. To print the picture, you’ll want to open it up in a window by itself. Do this by right-clicking (on a Mac, hold the Ctrl key down and then click) on the picture, and in the menu that appears, choose “View image” or “Open image in new window” something similar. (The exact wording varies depending on your web browser.)

5. Now you can print the photo by choosing “Print” from the browser’s “File” menu (or by clicking the print button, if your browser has one).

6. If you want to save the picture, do everything up through step 4, but instead of choosing “View image” from the menu, choose “Save target as…” or “Save image to disk” or something to that effect.

Microsoft, how do I hate thee? Let me count the ways…

Most people who know me well understand that I am an acknowledged Apple fanboy. But I don’t simply hate Microsoft because I love Apple. There may be more truth to the fact that I love Apple because I hate Microsoft.*

At any rate, it’s clear that I hate Microsoft, and for reasons that are much more concrete, tangible, and, in the context of this article, quantifiable.

As you may know (if you know me, and probably wouldn’t if you don’t, but you do now… get it?), I make my living building websites, which means that I am forced to deal with both Windows and Internet Explorer, like it or not. (Not.) I do my work on Macs, and my day-to-day web browser is Firefox. But everything I do needs to be tested in the Microsoft world, since that’s the context in which 95% of my audience will be viewing my work.

At least once every month or two, I am forced to bring my work to a grinding halt while I attempt to diagnose some obscure Internet Explorer problem I’ve just run into. It is usually some trivial function that I take for granted, but for some mysterious reason simply does not work in Internet Explorer under a particular set of conditions. So I spend a day or so fruitlessly searching Google to find others who’ve experienced the same problem. Eventually I resign myself to the fact that there is no logical explanation for the problem and I will never discover a real solution to it. So, the only alternative is to concoct a hokey workaround that Internet Explorer can accept. These weak victories are always bittersweet: at least I’ve found a way to move on and get back to the real tasks at hand, but my work is forever tainted by Microsoft lameness, without even giving me the satisfaction of a glimmer of understanding as to why I’ve just undergone a day of torture.

Finally, I’ve had enough. I know that as long as I work in this field, I will always have to deal with this problem, but I’m no longer going to silently submit to the whims of mediocre software. I will catalog my woes here for the world to see, so when I finally jump off a bridge with a thousand Windows Vista CD-ROMs tied around my waist, people won’t wonder why.

* For the record, I don’t unequivocally hate everything Microsoft does. I own, and enjoy immensely, an XBOX game console.

The mysterious window.print() problem

It seems an easy task: print the damn window. But no, nothing is ever as easy as it seems with Microsoft. In this particular case, I have a pop-up window which contains a frameset. The frameset consists of a left frame with a tree of page links, and a right frame containing the body of the page linked from the left frame. Within the body of the page in the right frame there are links to allow you to print the frame. So far, so good. But there’s also a special link that opens a new page that contains the full content of all of the pages, so you can basically print the whole lot at once instead of one page at a time.

As expected, all of this works just fine in other browsers, but not in Internet Explorer. It handles the regular single-page window.print() just fine, but when you go to the full page, nothing. No printing, no JavaScript errors, nothing. It’s like it’s just a dead link. With the exact same code as what works on the other pages. And, if you open the page from the frame in a new window by itself, it prints just fine. So, we have some pages printing just fine in the frame, and another page that prints just fine when it’s by itself, but it won’t print if it’s in the same frame that the other pages print fine in, using the same code. You can see why this is driving me insane, can’t you?

Nothing I find anywhere online suggests that this problem exists. So eventually I resort to the only option that’s available… open the troublesome page in its own pop-up (yes, a pop-up opening a pop-up… always a great idea), where window.print() works just fine.

Thanks again, Microsoft!