Javascript Tabbed Menu Working in IE7 but not Firefox

[barrymars]

First posting here so bear with me.

i'm working on a double tabbed menu system for a web aplpication, where the first row of 'divs' control visibility of the second row of 'divs'.

It all works fine in IE7 but when i open it in firefox i only get the top row with nothing being rendered for the bottom row.
some of the javascript is working because the top row changes colour when you roll the mouse over each tag.

Thanks in advance for any help in getting this to work in Firefox.

Oh and have tried using 'display' instead of 'visibility' with no success.

Javascript

// JavaScript Document
var currMenu = 'homeSubMenu';
var currTag = 'tag1';
var lastMenu = currMenu;
var lastTag = currTag;
function switchMenu(choice, tag)
{
    document.getElementById(lastMenu).style.visibility = 'hidden';
    document.getElementById(lastTag).style.backgroundColor = '#660066';
    document.getElementById(lastTag).style.borderBottomColor = '#000000';
    document.getElementById(choice).style.visibility = 'visible';
    document.getElementById(tag).style.backgroundColor = '#6600CC';
    document.getElementById(tag).style.borderBottomColor = '#6600CC';
    lastTag = tag;
    lastMenu = choice;
}
function resetMenu()
{
    document.getElementById(lastMenu).style.visibility = 'hidden';
    document.getElementById(lastTag).style.backgroundColor = '#660066';
    document.getElementById(lastTag).style.borderBottomColor = '#000000';
    document.getElementById(currMenu).style.visibility = 'visible';
    document.getElementById(currTag).style.backgroundColor = '#6600CC';
    document.getElementById(currTag).style.borderBottomColor = '#6600CC';
    lastTag = currTag;
    lastMenu = currMenu;
}

HTML

<div id='headmenu'>
  <div class='toptags'>
    <div id='tag1' onMouseOver="switchMenu('homeSubMenu', 'tag1')"><a href=''>Home</a></div>
    <div id='tag2' onMouseOver="switchMenu('contactsSubMenu', 'tag2')"><a href=''>Contacts</a></div>
    <div id='tag3' onMouseOver="switchMenu('projectsSubMenu', 'tag3')"><a href=''>Projects</a></div>
  </div>
  <div class='subtags' id='homeSubMenu'>
    <div id='marquee'>
      <marquee scrollamount="3">
        <a href='1'>text 1</a><div class='spacer'></div>
        <a href='2'>text 2</a><div class='spacer'></div>
        <a href='3'>text 3</a><div class='spacer'></div>
        <a href='4'>text 4</a><div class='spacer'></div>
      </marquee>
    </div>
    <div id='homeViewAll'><a href=''>View All</a></div>
  </div>
  <div id='bottomClearTag' onMouseOver="resetMenu()"></div>
  <div id='topClearTag' onMouseOver="resetMenu()"></div>
  <div id='leftClearTag' onMouseOver="resetMenu()"></div>
  <div id='rightClearTag' onMouseOver="resetMenu()"></div>
  <div id='clearTag' onMouseOver="resetMenu()"></div>
  <div class='subtags' id='contactsSubMenu'>
    <div id='contactsDetails'><a href=''>Contact Details</a></div>
    <div id='contactsAdd'><a href=''>Add Company</a></div>
    <div id='contactsReviews'><a href=''>Reviews</a></div>
    <div id='contactsPost'><a href=''>Post</a></div>
    <div id='contactsMailShot'><a href=''>Mail Shots</a></div>
  </div>
  <div class='subtags' id='projectsSubMenu'>
    <div id='projectsDetails'><a href=''>Project Details</a></div>
    <div id='projectsAdd'><a href=''>Add Project</a></div>
    <div id='projectsDocs'><a href=''>Documents</a></div>
    <div id='projectsTeams'><a href=''>Project Teams</a></div>
  </div>
</div>

Relevant CSS

.subtags
{
    position:absolute;
    width:768px;
    height:24px;
    margin-top:-1px;
    margin-left:15px;
    background-color:#6600CC;
    border:1px solid #000000;
    font-size:14px;
    visibility:hidden;
    z-index:-1;
}

[acoder]

Welcome to TheScripts (TSDN).

Maybe the height 24px of the subtags div style is the problem. Increase the height to, say, 100px, but that makes all divs the same height and extra space at the bottom of the smaller div.

[barrymars]

Welcome to TheScripts (TSDN).

Maybe the height 24px of the subtags div style is the problem. Increase the height to, say, 100px, but that makes all divs the same height and extra space at the bottom of the smaller div.

Thanks for the response but no improvement unfortunately.

As far as i can tell the css is working fine but the javascript isn't referencing the elements somehow (just can't figure out why).