html tags map and area in div tag

[matm00]

These tags are not ones I use often (map and area), but I know how to use them normally. However, this time I have an image in a absolutely positioned div and for some reason this is causing problems. The 'clickable' area is there, but not the right shape and not in the right position. Here's my code:

HTML


<div id="info">
<img src="img.gif" alt="img" border="0" usemap="#Map">
<map name="Map" id="map">
<area shape="rect" coords="113,26,248,21" href="#" alt="#" target="_blank" />
</map>
</div>

CSS


div#info {
position: absolute;
left: 150px;
top: 170px;
width: 480px;
height: 300px;
}

I've tried all manner of tweaks and changes to the css, but nothing seems to make much difference. The odd thing is if you set the x and y coordinates to 0,0 the 'clickable' area works and is the right size, but is obviously aligned to the top left corner of the image (as it should be), but as soon as you change the x and y values both the size and position of the 'clickable' area go completely wrong - they're there, but in the wrong place and the wrong size.

[matm00]

Ok, I've found a way round it by not using the map and area tags at all. I just set up an additional div tag in the right place and at the right size and make that clickable instead. There's always a way - think laterally :)