IE Wrestling

I’ve spent the last several days getting FeedLounge compatible with IE – not my favorite way to spend time.

When we made the decision to support Firefox first, it was with the knowledge that the IE and Safari ports would have to happen – but that doesn’t make it any less painful.

There were a bunch of display issues that were solved with an IE specific style sheet, and a variety of JavaScript oddities that have been worked around. Some issues in the JavaScript required branching, some I was able to fix by using a different technique – most everything is working as expected now.

Perhaps the strangest issue was a seemingly simple feature1 that I used to hide and show additional fields in a form.

Here is how the form looks to start:

Screenshot #1

Now I click the ‘Change Password” link, which sets the display property on a span element to show the element. The fields inside the span do appear:

Screenshot #2

But you can see how the form is subsequently mangled – other fields dissapear, get pushed around, etc.:

Screenshot #3

I’ll be fixing this today (at least that is the plan) and I need to do away with that border on the active tab as well.

While I’m bagging on IE, I should also add that I ran into a frustrating issue in Firefox as well. It seems that IE prefers to hide elements using visibility while Firefox is much happier if you use display. There were parts of the screen that I was using visibility to hide that were peeking out into the interface in very odd ways in Firefox. It took a very long time to debug this problem – the only way I managed to pinpoint it was thanks to a hunch.

I looped through all the DIV elements in the page and tested for their visibility, then I explicity set the display property to hide the elements that were already set to be hidden with visibility. Sure enough, the weird display issues went away and I hacked in some additional code into the display engine to handle this kind of situation.

  1. Which actually manifested itself in two places. [back]

This post is part of the project: FeedLounge. View the project timeline for more context on this post.