Low End Mac Reader Specials

TypeStyler For Mac OS X is Now Shipping! Download The Free Fully Functional 60 Day Tryout at www.typestyler.com

OWC: Get the Right Memory for Your Mac Top Quality, Competitive Price, Lifetime Backed Free Expert Support + Installation Videos too! MacBook & mini 8GB, iMac 16GB, Mac Pro up to 32GB. Click here

Poker Mac Don't install Parallels to play poker online! Poker Mac will show you how to download and install a native Mac poker application such as Full Tilt Poker Mac.

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

Compare products like desktop computers, apple laptops, apple macs, and LCD Monitors side by side! All the information and reviews to make the best purchasing decision for new mobile phones, sat nav systems, or MP3 players. The Ciao online shopping community makes searching products easy for you.

Mac Musings

Which One's Broken, Low End Mac or Internet Explorer 6?

Dan Knight - 2005.05.27 - Tip Jar

A week ago we moved to a CSS-based design at Low End Mac. CSS has been supported by all the major browsers since version 4.0, and only the tiniest fraction of a percent of our visitors are not using modern browsers, so I spent some time learning CSS design, pretty much replicated our existing look-and-feel, and started posting pages with the new design last week.

I did a lot of reading, typed in a lot of examples, did a lot of testing on my eMac (Firefox, Safari, Shiira, Camino, Opera, even Internet Explorer 5.2), and tweaked things until it looked almost the same on all these browsers. There are some differences, and iCab 2.9.x doesn't support the design at all (3.0 will), but between following established standards and testing in all my browsers, I though I was safe.

I didn't count on Internet Explorer 6.

Go figure. In no time at all I started getting emails about Low End Mac being "broken". Broken? But it worked in each one of my browsers and was directly based in samples published in CSS manuals. It should have worked.

It took a while, but by midweek I was finally getting some screen shots. Those of you who don't use IE 6 know that the LEM home page looks like this:

Low End Mac in Firefox

Visitors using IE 6 were seeing this instead:

Low End Mac in Internet Explorer 6

It didn't make any sense at all. The vertical bar with the ads is supposed to be absolutely positioned on the left side of the page. It is in every browser except IE 6. I have to believe that this is some sort of Microsoft bug, since my style sheets and XHTML validate.

If you do a Google search for Internet Explorer CSS bugs, you'll discover there are a lot of them. From my research, none of them matched this problem, so I'm hoping some LEM reader will be able to help solve this problem. After all, 36% of our visitors are using Windows XP, and 90% of them are probably using IE 6. That's one-third of our visitors who can't read the site properly - and that's a big problem.

(Yes, I really should invest in a WinXP computer, but my 17 months with an old Dell have convinced me that a Windows computer on the Internet is trouble just waiting to happen. I spend more time updating and running antivirus, anti-adware, and anti-spyware programs than actually using the computer.)

Here's the CSS code that defines the main section of our pages:

#content {position: relative;
background-color: #ffffff; }
   
#main-text {margin-left: 168px;
margin-right: 0.5em;
position: static;
top: 0px; }
   
#adbar {position: absolute;
background-color: #eeeeee;
top: 0px;
left: 0px;
bottom: 0px;
width: 160px;
line-height: 1.25em; }

The "adbar" section should place a 160 pixel wide bar down right at the left side (0px) of the page. The "main-text" section puts the bulk of the page 169 pixels from the left side of the page. It shouldn't be possible for these sections to overlap.

And here's a very reduced version of the XHTML code that shapes the page:

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

The first and last "divs" mark off a section of the page. The 2nd and 3rd divs display the main text in accordance with the CSS rules above. The 4th and 5th divs display the advertising bar on the left side of the page - except in IE 6.

(For the record, I've eliminated the "adbar" section on this page so IE 6 users can read it.)

If any of you can shed some light and help me find a solution to this problem - other than going back to inefficient table-based layout - I'm all ears. Please email me. Thanks! Dan Knight LEM

Feedback

Several visitors have emailed to answer the question in the title of this article, "Which one's broken, Low End Mac or Internet Explorer 6?" They each say it's definitely IE 6.

See our follow-up article, Making Low End Mac's Design Work with Internet Explorer 6, to see how we solved this problem.

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

Recent Deals

About LEM | Support | Usage | Privacy | Contacts

Entire Low End Mac website copyright ©1997-2009 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, iPhone, PowerBook, MacBook, MagSafe, 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.

Custom Search

Amazon.com

Navigation

Used Mac Dealers
Apple History
Video Cards
Email Lists

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
B&H
MacMall
TechRestore
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.