GETTING STARTED

When I started to research IE bugs for my own use, a few months ago, I was totally overwhelmed. In the process, I came upon a document from non other than Microsoft. It was written when CSS was just coming into wide use, and warned of three problems that might affect the then-current version of IE--I think it was 5. They were: using floats, the hasLayout and other box-model problems such as the collapsing layout problem, and lack of support for "some" CSS attributes.

Guess what: they're still with us. The new test release of IE 8 solves many of the problems, but not all. And, most of our clients who use IE are still looking at sites through version 7, and even 6.

FIRST STEPS

To begin sorting out the bugs that come up in IE, I looked for Web sites that gave fixes. There are seemingly gazillions of them out there, if you include blogs.

Here's a chart of some of the more common bugs, the fixes that have been offered, and links to the sites.

GETTING (SOMEWHAT) SMARTER

After splashing around in this cyber-sea, I finally stopped to think. I realized that, as a typical Web design newbie, my reaction to the problems I met was to start changing things, just messing with the markup with very little organization. I never would have approached a problem so frantically in my days as a lab scientist, so why do it now?

OK, back off, think rationally. Start by asking basic questions. What are the structures and processes that produce a Web page from HTML and CSS markup? Well, the layout engines. The IE rendering engine uses Trident, and is built to allow maximum integration with Microsoft's software products, and the Safari rendering engine uses WebKit and is constructed for maximum integration with Apple's software products. Firefox's Gecko engine is built for use as an API with a broad range of applications.

OK, that's nice. But what does that mean in terms of markup procedure? I hadn't a clue. Fortunately, some very good resources exist. Starting with online resources, this chart is a gleaning of what I've found to be the most useful sources. Preventive medicine, so to speak.

PRINT AND OTHER RESOURCES

Everyone has their own way of working. I am not very screen-oriented; if I find something helpful on the Web, I usually print it out. And, rather than relying solely on my browser's History function, I save the Web pages of interest in a very neat database program for Mac called SOHO notes. All the sites I've referenced in the two charts are now saved as complete Web pages in my SOHO notes.

I'm also a reference book addict. Two of the most useful Web design books I've purchased recently are both from SitePoint: The Ultimate CSS Reference, and the strangely titled Everything You Know About CSS Is Wrong!

The Ultimate CSS Reference starts out with very basic explanations, but the chapter CSS Layout and Formatting is the best explanation I've seen of formatting that leads to IE bugs. There is an entire section on the IE hasLayout property.

The Everything You Know... book, on the other hand, is more a hands-on, how-to book. The authors focus on the table layout possibilities within CSS, as opposed to building a Web site using a hybrid of CSS and HTML tables that were not intended for structural purposes. The main example is a 3-column Web site that has great advantages for building a simple, yet information-rich site. The authors build it first in a way that looks great in standards-compliant browsers, and then show how to modify the CSS to avoid problems in IE 6 and 7.