Man, you really did that the hard way didn't you?!

LOL.

I would have just used a div with the map as a background image and its position set to relative, then made the little "w" icons links and absolutely positioned them where they need to be...no tables or failure, just solid stuff...

why don't you give that a try? It will clean up your code immensely.

instead of what you have now you can assign the icon as a background image to a class and not have to repeat it over and over and over as an img element...you can do something like the following (just an example, specific to your case, but isn't the exact code):

div.map {
   position: relative;
   width: 250px;
   height: 400px;
   background: url(map.png) no-repeat left top;
}
a.location-icon {
   position: absolute
   display: block; 
   width: 10px;
   height: 10px;
   text-indent: -9999px;
   background: url(location-icon.png) no-repeat center center;
}
a#auckland-east {
   top: 150px;
   left: 198px;
}
a#auckland-south {
   top: 250px;
   left: 187px;
}
a#auckland-west {
   top: 143px;
   left: 156px;
}

and your html would be something like:

<div class="map">
   <a id="auckland-east" class="location-icon" href="/auckland-east" title="Auckland East">Auckland East</a>
   <a id="auckland-south" class="location-icon" href="/auckland-south" title="Auckland South">Auckland South</a>
   <a id="auckland-west" class="location-icon" href="/auckland-west" title="Auckland West">Auckland West</a>
</div>