Everything In Between

Tonight I spent much of my time exploring the remains of one of the two PC machines my father gave me for my up-and-coming “computer lab.” There wasn’t much of interest on the machine, but as I was looking around the apartment I realized I had more computers than monitors.

Hardware Countdown

My oldest machine, an ancient first-generation Apple iMac DV:SE (do you remember those?), obviously contains the CRT screen along with the computer hardware in one box. So for the most part I consider that one unit. I also have my laptop which falls under the same category, but then I have two PC towers, and I’m getting ready for yet another from my mother along with a G3 tower soon. All of them are headless.

I only have one stand-alone monitor. So that means up to four computers need to share one monitor. Since I’m planning on using at least one or two computers as dedicated servers, I’m not going to need those connected to monitors all the time. For instance, I could VNC in and look around on the rare occasions when I have to. The others, however, are probably going to need something more scalable. I don’t have the space or the money for more monitors, so the best solution here is undoubtedly a KVM switch.

Broken CSS Can Lead to Unuseable Sites

As I was browsing, I came upon KVM Galore, retailers of every kind of KVM switch imagineable. Unfortunately, when I arrived I couldn’t read any product description because the bottom two-thirds of each line of text was chopped off, disappearing behind a white background. Here’s a screen shot.

My first thought was confusion, but my second was to see if I could fix it. So I dived into the source and traced the problem to a <span></span> element that was pretending to be a block-level box. Their CSS had given the span a width, background and border, but no display property.

Without the proper display rule, CSS-compliant browsers treated the span as an inline element, which is obviously not what the designer had intended. So I created a local style-sheet of my own and fixed the problem for the duration of my stay on their site. Here is the style sheet I used:

.detspecs { display: block; }

Believe it or not, that’s it. That’s all it took to fix the problem. I was using Firefox to browse the site, but after a while I became curious about the other browsers. It turns out that the site looks like this on Firefox for Mac, Netscape on both Mac and Windows, and while it’s mostly better in Safari, nasty black lines cut into the text on that browser as well. Opera 7.5 on both Mac and Windows, along with Internet Explorer 6 for Windows and 5.2 for the Mac looked fine. I’ve emailed the site owner and hope that they will fix the problem as soon as they can.

This isn’t the first time an e-commerce site has had broken CSS. Not long ago I wrote about another savvy web developer who fixed the Sainsbury home shopping web site just like I did for KVM Galore. On the bright side, it’s good to see CSS being used more and more thoroughly throughout the online business world.

I still haven’t chosen a KVM switch yet as I’m still researching the topic. If anyone has any advice, I’d love to hear it.

Update: I just heard back from the site owner today (January 19^th), and am glad to see that the CSS has been fixed. Good job, KVM Galore!