IE <div> onMouseOver issue

[NetizenRon]

I'm using the pre-installed scripts in DreamWeaver MX for mouseover buttons and hide/show layer. They seem pretty solid, never had a problem with the mouseover buttons in any browser. Makes my life simpler. It's the hide/show layer addition to the script that makes me want to pull what little hair I have left out.

Here is a demo of a site I'm building at work: http://www.thegazz.com/demo (I only build them, I don't name them).

In both IE and Firefox the mouseovers with drop down layers work fine. It's when I goto hover over the layers that IE faulters. I figured it was a compatability issue, that maybe IE doesn't recognize mouseovers in div tags. What really confuses me, if you test the demo, the first drop down works and stays. The structure is the same for each layer, so I'm stumped. Why would it work for the first and not the others? And the code obviously works since the mouseover portion shows.

// Example: showHideLayers(Layer1,'','show',Layer2,'','hide');
function showHideLayers()
{ 
  var i, visStr, obj, args = showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3)
  {
    if ((obj = MM_findObj(args[i])) != null)
    {
      visStr = args[i+2];
      if (obj.style)
      {
        obj = obj.style;
        if(visStr == 'show') visStr = 'visible';
        else if(visStr == 'hide') visStr = 'hidden';
      }
      obj.visibility = visStr;
    }
  }
}

[NetizenRon]

Also, I should have mentioned. I've removed the first mouseover thinking the second one would work in IE, no, still didn't. I also copied the tags for the other mouseovers to the first section, only to find they did work.

I just can't wrap my head around what is different.

[tthurgo]

This is tough since it uses another function from dreamweaver (mm_findobj). So anyway, here is a piece of code that should work.

function show_hide_layer(the_layer){
  if(document.getElementById(the_layer).style.display == 'none'){
    document.getElementById(the_layer).style.display = 'inline';
  }else{
    document.getElementById(the_layer).style.display = 'none';
  }
}

Works for me in IE, Firefox, Safari and so on. Even Opera does it (I think! ).

[burrobad]

<script type="text/javascript">function showhide(ide){ex = document.getElementById(ide).style;ex.display=(ex.display=='block')?'none':'block';}</script>

if you want inline, just change the display value "block" to "inline". the functionality is same as^^