Strange Imagemapping Behavior – Hotspot Registration Incorrect

I have a fairly complex imagemap that uses a number of polygons to map out hotspots in the shape of portions of the map. The map works fine, except for this strange little quirk.

When I preview the map from the edit page, the hotspots are dead-on. I can mouseover the edge of each hotspot perfectly. However, when I display the live page, the hotspots are all shifted to the right and below the actual hotspots on the map. I can’t show you how it works correctly with preview because you would have to be logged in as me, but you can go to: jimrea.com/wp4/pacific-palisades-neighborhoods/ where you will see the target on the map light up in blue and the mouseover pointer is active to the right and below the blue portion.

I did wrap the html code in a div id=”PPMap” and added the exact dimensions of the overall map in the CSS.

#PPMap {
height: 346;
width: 800;
}