Gordaen's Blog

I had thought I could not be any more disappointed with IE… It has always been the butt of jokes for screwing up nearly everything possible, but I didn’t fully realize how terrible it really is until a few months ago when I started working on the webpages for the housing section of the university here. More jokes grew, some the kind only the computer savvy (that’s what nerds call themselves) would appreciate: “You’d think IE wouldn’t be so bloated from all that 3-pixel jogging it does.” Nonetheless, even unsophisticated cries of pain have become frequent: “Why are my divisions disappearing!?”

Expressing my frustration online, my buddy Babster sent me a link to Position is Everything, a site featuring a list of various IE display problems (as opposed to the security problems that a site like Secunia focuses on). I was not sure whether to be pleased that a site had listed so many flaws that I didn’t know of, or if I should be disgusted that all these flaws remain unfixed.

This morning I spent a few hours creating an interface for the Virtual Tour that I am redesigning. The main map has three sections that are highlighted and clickable via an image map. I used JavaScript to create a “popup” of sorts (not too dissimilar to a lightbox). It’s an absolute division that contains a larger version of the section that was clicked on the main map, but it also has a title bar and an X to close it out. With the title bar, you can drag the division around. Clicking on the X, another highlighted region, or elsewhere on the map closes (hides) the division. I did it using a hidden division that is dynamically populated via innerHTML depending on what section of the map is clicked. It worked great in both browsers, and I was rather glad to see that so many hours of hard work had paid off. Then I realized one little problem, IE ignored the secondary image map! The popup is a blown-up version of that region so viewers can click on individual buildings to see their pages, but IE completely ignores the image map since the image tag does not exist on the page when it is loaded.

I spent quite a while trying minor fixes, but eventually I realized that with dynamic, innerHTML content, IE cannot use an image map. One of the thoughts of a friend was to have the innerHTML also generate the image map tags, so that the image and map would be generated at the same time and IE would read both, properly associating them. Of course that didn’t work either.

After half-an-hour, I created a mockup of another method of accomplishing the same thing: I had each region in its own hidden division with the image tag and image map information already there. Then I made is so that clicking the region would unhide the divisions and use the mouse coordinates to move the division to the proper position. After I proved it could work, I redesigned the entire original script and page to function that way, and it actually worked. Of course, then I had the pleasure of dealing with IE’s magical 3-pixel bug. Below the popup image, IE pushed the border three pixels below the proper position, leaving that extra content as a transparent section. The styles were all set exactly as they had been with the innerHTML method, but IE is just weird like that. I ended up finding out that the white space (which IE should ignore) caused the browser to magically expand the division at the bottom. So now the source is hideous, because I had to put 2500+ characters on one line rather than using line breaks and tabs to keep it clean. I suppose it’s funny that IE is like a plague, making things as hideous as it is…

It amazes me that I have to spend extra hours developing an alternate method and then work around the various bugs, just because IE is so “quirky” (which is the nice way of saying that it isn’t worth the electricity that it takes to run the program). I wonder how much major sites spend on the extra web design hours just to make IE play nicely…