[RESOLVED] positioning hidden/visible divs

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:
[url]http://www.foremostgroups.com/dev/20…ing/index.html[/url]

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.

Also in #HTML _↴