Mac Musings

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

Dan Knight - 2005.06.02 - Tip Jar

Low End Mac Reader Specials

Memory To Go Special: New 2008 iMac 2GB $42 / iMac Intel Core2 DUO & MacBook Pro 2GB $36 - 1GB $20. MacPro 8 Core Memory 4GB kit $154 / 2GB kit $94 -- Free shipping available.

Download Typestyler, still the Ultimate Styling Tool for Internet, Print and Video Graphics. Works great in Classic with a Native OS X Version on the way. Free Tryout: www.typestyler.com

LA Computer Company: Specials on AppleCare, iMac's, Apple Batteries and Apple A/C Adapters. Also Great prices on Used Apple Computers. Call 1-800-941-7654 Click Here.

OWC: Mercury Elite FW800/FW400/USB2/eSATA up to 2.0TB TOP-RATED Solutions offer High Performance, Reliable storage for all your data storage needs. 500GB $159.99, 750GB $199.99, 1.0TB from $299.99

Mac users can finally play Party Poker for Mac. Not only that, they can also learn how to play PokerStars for Mac.

Laptop Hardware Provided by TechRestore - Overnight Mac & iPod Repairs.

Compare products like desktop computers, laptops, and LCD TVs side by side! All the information and reviews to make the best purchasing decision for a new cell phone GPS products or MP3 players. The Ciao network makes searching products easy for you.

New iMac 800Mhz Memory 4GB $90, 2GB $45 - Click to Maximize your Macs...

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. LEM

Dan Knight has been using Macs since 1986, sold Macs for several years, supported them for many more years, and has been publishing Low End Mac since April 1997. If you find Dan's articles helpful, please consider making a donation to his tip jar.

Recent Mac Musings

Links for the Day

Recent Content on Low End Mac

About LEM | Support | Usage | Privacy | Contacts

Entire Low End Mac website copyright ©1997-2008 by Cobweb Publishing, Inc., unless otherwise noted. All rights reserved. Advice presented in good faith, but what works for one may not work for all. Please report errors to .
  LINKS: We allow and encourage links to any public page as long as the linked page does not appear within a frame that prevents bookmarking it.
  Access our RSS news feed at http://lowendmac.com/feed.xml.
  Email may be published at our discretion; email addresses will not be published without permission, and we will encrypt them in hopes of avoiding spammers. If you prefer your message not be published, mark it "not for publication." Letters may be edited for length, context, and to match house style.
  PRIVACY: We don't collect personal information unless you explicitly provide it. For more details, see our Terms of Use.
  Low End Mac is an independent publication and has not been authorized, sponsored, or otherwise approved by Apple Inc. Apple, the Apple logo, Macintosh, iBook, iMac, eMac, iPod, PowerBook, MacBook, Mac Pro, Apple TV, and AirPort are registered trademarks of Apple Inc. Additional company and product names may be trademarks or registered trademarks and are hereby acknowledged.


Have a question?
Ask an expert!

Navigation

Used Mac Dealers
Apple History
Best Used Macs
Video Cards
Email Lists
InfoMac's Low
End Mac Forum

Favorite Sites

MacSurfer
MacMinute
MacInTouch
MyAppleMenu
InfoMac
Macs Only!
The Mac Observer
Accelerate Your Mac
RetroMacCast
PB Central
MacWindows
The Vintage Mac
   Museum
DealMac
DealsOnTheWeb
Mac2Sell
ramseeker
Mac Driver Museum
JAG's House
System 6 Heaven
System 7 Today
the pickle's Low-End
   Mac FAQ
Abandonware
   Petition
Mac vs. PC Info

Affiliates

The Apple Store
Mac Connection
MacMall
TechRestore
MacResQ
ExperCom
Crucial Memory
batteries.com

Advertise

All of our advertising is handled by BackBeat Media. For price quotes and advertising information, please contact at BackBeat Media (646-546-5194). This number is for advertising only.

Open Link

Problems viewing this page with Internet Explorer 5.5 or 6? It works fine in other browsers, including IE 7. We recommend Firefox for those using Windows, as it is standards based and more secure than IE 6 (and earlier). More LEM visitors use Firefox than any other browser.