Making Low End Mac's Design Work with Internet Explorer 6

Last Friday I asked the question, Which One's Broken, Low End Mac or Internet Explorer 6? The universal answer: IE 6.

I'd created a simple, elegant design for Low End Mac using Cascading Style Sheets (CSS) instead of a table-based layout. I looked great in Firefox (my primary browser) and Safari. And in IE 5.2 for Mac. And one reader even reported that it worked great in iCab 3.0 beta.

But it didn't work with Internet Explorer 5.5 or 6.0, and I couldn't understand why. Sure, usual Microsoft thumbing their nose at standards, breaking things that had worked in earlier versions of their browser - but what exactly was wrong with IE 6 and how could I work around it?

Going Windows?

The biggest part of the problem is that I had no way of testing my design on Windows, so I did a little research, compared the price and convenience of low-end desktop PCs vs. laptops, and bought a very nice Windows laptop on Tuesday.

The model I settled on is the Acer Aspire AS3502WLCi - a name only a geek could create or love. CompUSA sells these for US$699, and they didn't even have a display model. That's how fast they sell. Fortunately a shipment had just come in.

The Aspire 3502 has a 15.4" 1280 x 800 (WXGA) screen that's crisp and bright. The Celeron M runs at 1.4 GHz. The computer has 512 MB of memory (from what I hear, a minimum for good Windows performance, and twice as much as most entry-level laptops have) on a 400 MHz bus. There's a 40 GB hard drive, a Combo drive, built-in 802.11b/g, and the most important thing of all - Windows XP Home Edition.

Compare that with Apple's $999 12" iBook, and you can see why Windows is popular. Not only is the CPU marginally faster in clock speed, but the Aspire 3502 has twice as much RAM, a much faster memory bus, lots more ports, and a much bigger widescreen display with 30% more pixels.

On the down side, the battery is only rated at 100 minutes vs. 360 for the iBook, and the Acer is huge by comparison. At 14.3" wide, 11" deep, and 1.5" thick, it dwarfs my four-year-old 15" PowerBook G4/400. It's also nearly a pound heavier than my PowerBook and 1.3 pounds heavier than the 12" iBook.

And then there's Windows, which even in its latest version doesn't come close to having the elegance and friendliness of any Mac OS. Window XP is prettier than earlier versions, but there's a difference between simplicity with elegance and eye candy.

Another oddity - the hard drive is partitioned, so the 40 GB drive has a 3 GB PQSERVICE partition, a 17 GB main partition, and a second 17 GB partition. Weird. I'm sure that first partition serves a crucial purpose, but I can't comprehend why they'd take an already-small 40 GB drive and not create a 34 GB user partition.

Another Windows thing - the first thing the computer wants you to do is backup everything. That required four CD-R discs and took nearly an hour. Unlike the Mac, there doesn't seem to be a simple restore disc. What, that saves Acer maybe 50¢ while tying up an hour of your time. Not cool - and cheap.

Finally, this being Windows, the computer keeps reminding me that I don't have any antivirus software installed yet. Constantly. Hey, I'll get to it, but first things first. I need to install Firefox, my favorite messaging clients, and get Low End Mac working on Microsoft's broken browser.

Making LEM Work with IE 6

I spent most of Wednesday experimenting, testing, and fiddling with page layout. I created a minimum page that just included the troublesome section, and I discovered what the problem was.

<div id="content">
   <div id="main-text">
      INCLUDE TEXT HERE
   </div>
   <div id="adbar">
      INCLUDE ADS HERE
   </div>
</div>

When I removed <div id="content"> and the last </div>, everything worked perfectly. The ad bar on the left side of the page no longer covered the main text. And the minute I put that div back, the problem returned.

That created a new problem. Now the adbar sat at the top left corner of the page, covering the Low End Mac logo and part of our navigation bar. That's the problem the content div avoided. But it broke in IE 6, which at least one-third of our visitors use. (Windows XP accounts for 36% of our traffic, Windows 2000 for another 9%. I'm sure at least 80% of them are using Microsoft's browser.)

I'd have to modify the description of the adbar in my style sheet. Here's what it looks like now:

#adbar {position: absolute;
top: 195px;
left: 0px;
bottom: 0px;
width: 140px;
line-height: 1.25em; }

Update Oct. 2005: We still haven't found a line-height system that works consistently. However, using ems broke under Firefox 1.5b. Switching to percentages fixed it there.

After a fair bit of trial and error, I determined that setting the adbar 195 pixels from the top of the page worked in all my browsers. Because it was no longer flush with the gray navigation bar, I removed the gray background, and I made it narrower, which also leaves more room for text.

I made a few other changes. The text links in the adbar are no longer centered, and they have a 5 pixel margin to keep them from running into the edge of the page. Also, the "Newest Content on Low End Mac" and "Around the Web" headings are now reversed against a blue bar.

And once I had all of that fixed, I had 200+ pages that needed to be updated with one or more changes - primarily removing the content div.

It works, but Microsoft's broken browser is a costly mistake. They broke things that had worked in the past, and because of that I spent $699 on a computer and spent a whole day testing and recreating a design that worked on all the other modern browsers with CSS support.

Two suggestions:

1. If you design websites on a Mac, get a cheap Win2k or WinXP computer so you can test it using Internet Explorer 6.
2. For Microsoft, don't wait until Longhorn - fix your browser now. The whole world shouldn't have to waste their time modifying designs that work in everything but IE 6.

• Link: Acer Aspire AS3502WLCi
• Link: CompUSA