HTML div positioning off

I am positioning points on a map through divs.

I have the following code:

<div id="map" style = "background-image:url('map.gif');width:382px;height:524px;">

<DIV STYLE="position:absolute; top:222px; left:204px;">
<a href=""><img src="bullet.gif" border=0>Point</a>
</DIV>
</DIV>

When I add this code on my page, the point is not on the map so I added a position:relative

<div id="map" style = "background-image:u开发者_JAVA技巧rl('map.gif');width:382px;height:524px;position:relative;">

Now the point is on the map but its a bit off from where I initially wanted. Does anyways have a fix for this? Also The points are in different positions in different browsers. Is there a way to standardize where the position is?

---

I recommend only using one level (instead of cascading), also, spans for the overlay.

<div>
  <div>
  </div>
<div>

use

<div style=...>     the map
</div>
<span style=...></span>   an overlayed rectangle
<span style=...></span>   an overlayed rectangle

is this ok for you? If not pleas specify and i will adapt it.

---

well you may need to adjust the "top" and "left" values, since the "point" is now positioned absolutely relative to the "map" div. Check this out if it helps http://jsfiddle.net/DK9wT/6/