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.
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:
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:
But you can see how the form is subsequently mangled – other fields dissapear, get pushed around, etc.:
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.
- 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.
Alex, I use display (only), and it works in both IE and Firefox. Of course, my layouts where I’m hiding things are very simple, and it’s only divs that are being hidden and re-shown…
Are you trying to make things work on IE 5.1 Mac? 😉
I don’t support IE on Mac on anything, except by accident.
I generally only use
displayas well, but for some of the more complicated stuff we are doing, it created problems. In IE (Win)
display: none;can result in inaccessibility to elements via JS.
Oh, and before you branch too much code, did you try the “IE” way of doing something in Firefox/Safari/etc? The other browsers might implement the IE way.
Very little code needed to be branched, but it did need to be branched. I’ve been doing this for a long time. 🙂