I have spent a good portion of this week bug fixing, trying to get IE to play by the same CSS rules that well made web browsers out there understand. Most anybody whom develops with web standards knows all to well the pains of the past week.

I figured I would share some experiences here with you in hopes to aid someone in the future that had the same problems I did.

First all in IE6/5 on PC/MAC we were using suckerfish’s drop down menus, of ALA fame, to generate clean list driven navigations. On the very same page I was placing an absolutely positioned image, when I created this layout I did not realize I was walking into the depths of hell.

Problem: IE decided that z-index didn’t matter (heck why should it), and placed my navigation under my absolutely positioned image. Hot.

The Fix: After sifting through the countless help pages on the internet, I ran across a site that mentioned that when switching layer visibility in IE, IE decides to reset the z-index to 0 by default. We [my team] simply modified the JavaScript (that’s only used in IE’s browsers because of ignorance of the w3c spec. on CSS) to include resetting the z-index after we change the layer’s visibility to visible (or display block, whichever your flavor).

Problem Dos: IE5.2 Mac simply “wigs out” like a rabid squirrel .. hiding navigation items on hover, changing padding, margin and positioning on hover and random sorts of bi-polar browser behavior.

After deeper investigations, some .class selectors on a specific page were affecting other page elements that they in no way were tied to. Weird.

The Fix: After a brief panic attack, a zanax and a few minutes of feeling worthless, I again hit the dusty trails of Google in search of an answer with no specific direction in mind A.K.A Code Fishing.

I use Firefox as a web-browser because of the great web developer plugins available. After right clicking on my document and choosing “properties” on the webpage, I realized that the page was rendering in quirks mode!

Quirks Mode: A rendering mode that some browsers use when either the document contains errors or is missing such key pieces of information like the Doctype or Character Set.

I never knew such an option existed in Firefox, I knew when a browser is running in quirks mode they have been known to do some weird things. I validated my document, fixed my errors and slowly my problems began to vanish.

I always assumed that you had to “guess” when a browser was rendering in quirks mode. Guessing if a browser is running in quirks mode is like trying to staple jello to a wall, its freaking impossible.

As a few brilliant developers have previously mentioned on sites much more useful than this one, the first step in bug checking should ALWAYS be validating the document.

Useful I hope you find this … Go young Jedi, May the force be with you.