IE Blew Up My Layout!!!

We've all experienced it, you've themed out a page and it looks fantastic in Firefox. Unfortunately the time has arrived for your IE testing... You've dreaded it the entire time and have put it off. You fire up your windows testing environment and your worst nightmare has come true. The entire layout is blown out. Divs are strewn about like your tpl.php ate a hand grenade.

There are many possible reasons for this to happen, but I'll only focus on one that I suggest be the first you check out. Firefox generally is my browser of choice for front end development because of the plethora of tools that are available to me. Firebug, Httpfox, YSlow etc. are easy to install and intuitive to use. Unfortunately, even with all my tools Firefox failed me that day.

What happened was I had an open tag in my tpl.php. Just totally missed it. It happens sometimes you get interrupted in the middle of writing your code, or just get sidetracked. Unfortunately Firefox figured out that I forgot to close the div and closed it for me. So it was a little maddening to track down. The source looked fine because it had already been rendered and processed. But the actual tpl.php file was missing the closing tag. IE showed me that quite clearly, unfortunately Firefox didn't.

So, before you throw your laptop out the window while cursing Microsoft, check your html for open tags.