I have a section of my page that makes divs visible onmouseover.

On windows (IE and Firefox) - it works perfectly.
But on a Mac it doesn't - Every div positioned below the first one ('NJO') becomes visible too far down, but I can't position it using CSS because it messes it up on Windows browsers.

I don't really know how to word that correctly - I hope it makes sense.

here's the URL:
http://www.foremostgroups.com/dev/20...ing/index.html


and the code (simplified):

<div align="left" style="width:501px; height:305px; border:1px solid #DDDDDD; position:relative; top:10px">

<img src="../images/manufacturing_map.jpg" alt="Manufacturing Map" name="manufacturing_map" usemap="#manufacturing_mapMap" id="manufacturing_map" />
<map name="manufacturing_mapMap" id="manufacturing_mapMap">
<area shape="circle" coords="112,91,13" href="njo_intro.html" onmouseover="togLayer('text1'); return false" />
<area shape="circle" coords="421,100,12" href="huida_intro.html" onmouseover="togLayer('text2'); return false" />
<area shape="circle" coords="431,121,11" href="flb_intro.html" onmouseover="togLayer('text3'); return false" />
<area shape="circle" coords="410,127,11" href="wonderwood_intro.html" onmouseover="togLayer('text4'); return false" />
</map>

</div>

<div id="text0" class="text" style="position:relative; top:10px">&nbsp;</div>
<div id="text1" class="text" style="position:relative; top:10px">blah1</div>
<div id="text2" class="text" style="position:relative; top:10px">blah2</div>
<div id="text3" class="text" style="position:relative; top:10px">blah3</div>
<div id="text4" class="text" style="position:relative; top:10px">blah4</div>


...and in the HEAD:

<script type="text/javascript">
var currLayerId = "text0";

function togLayer(id)
{
if(currLayerId) setDisplay(currLayerId, "none");
if(id)setDisplay(id, "block");
currLayerId = id;
}

function setDisplay(id,value)
{
var elm = document.getElementById(id);
elm.style.display = value;
}
</script>


...and the CSS:
.text {
display: none;
width:470px;
height:375px;
border:none;
}
#text0{display: block;}


I've been trying to make it position correctly for so long, and I'm completely out of ideas. Does anyone have any suggestions?

Thanks so much.