« Careful with filenames when deploying to Linux | Main | Whitespace in XML - Firefox vs. IE »
Image map coordinates calculated incorrectly by IE7
By Shawn Bradley | September 6, 2007
OK, this one really pissed me off!!! For days now, I have had a problem with a complex image map. As usual, it’s the same old tune - it works fine in Firefox, but barfs in IE. I have an image map that displays several East Texas counties. As the user rolls over the different counties, additional information is displayed in a separate DIV. I got it working fine in Firefox, but when I tested it in IE, the coordinates were incorrect. My DIV would only appear if I rolled over a part of the polygon, but most of the polygon is ignored completely.
I surfed forums and blogs for hours searching for a clue. When I found nothing, I decided to completely re-construct the page from scratch and locate the point where the problem occurs. I went back to Photoshop and exported my image map, checking it in IE immediately. At this point, it worked fine. I then began modifying the resulting code, testing each change along the way. I made a bunch of changes, most of which were formatting, and tried again in IE. Mysteriously, the problem appeared! This was quite puzzling since the changes were only formatting, not functional. I rolled back these changes, and it worked again. Weird…
So my next step was to incrementally re-institute my formatting changes (I tend to be a bit anal about indents and white space), testing each change in IE. Everything worked fine, until I changed the indenting on the block of code that defines the image map. As soon as I indented these lines, the problem returned. When I removed the indenting, aligning the code to the far left, the problem went away. Further experimentation revealed that as long as the <area> tags are left aligned, the map works fine in IE7. Otherwise, the coordinates are calculated incorrectly in the image map.
Topics: Web Development, Software Development |