Aug 23, 2008

If you develop web pages, and are at all concerned about consistency between FireFox and IE, you must read this post!

I have used the Web Developer plugin for FireFox for quite some time.  It is a lifesaver when you are developing web pages, as you can easily see all of the styles and markup that is being applied to a specific area of your page.  The problem is that it only works in FireFox, leaving IE out in the cold.  Since IE is the real pain in the rear when it comes to Web Dev, the lack of a similar tool has been a major PITA.

Well, a two hour witch hunt for an IE only CSS bug lead me to scour the net for something to make the pain go away!  The fix?

IE HTML Element Spy, an IE7 Add-On.  I LOVE THIS TOOL!!!

It works a little differently than Web Developer, but it really gets the job done.  I litterally spent the last 2 hours trying to debug a DIV that wouldn’t line up with the top of a page.  It was completely impossible to find out why – the thing worked fine in FireFox, but not IE.  Installing IE HTML Element Spy lead me right to the problem – a burried IE only CSS rule that put a 30px padding at the top of the sidebar.

Voila!  Problem solved.

So, 2 hours and not a single clue using my own powers of debugging versus 2 minutes and a fix with IE HTML Element Spy.  Which would you prefer?!  Yeah, me too!

Download that puppy now!

Frackin’ IE.