Only One Menu Works In IE

[mran]

Hi,

I'm having this problem in two different sites.  In both sites, I have two separate menus, though they behave differently. 

There is a top horizontal menu which is working nearly* perfectly on both sites in all browsers.
There is a secondary menu, vertical with drop-downs which works perfectly EXCEPT in IE6.  It should have rollovers and several levels, but in IE6, it just sits there.

I am calling the CSSmenu.js file.

Here are my sites and menu calls:

http://www.tcadp.org/cmsms/  (* You might notice that on this site, in IE, there seems to be a z-index issue with some of the menu items displaying behind some of the page content.  I had this problem in FF, but styled it with all the appropriate Z-index rules, but these don't seem to be heard in IE.)

http://mleyva.sc54.info/index.php?page=mcfarlane-s  This is my second site.  I actually have three menus here, and again, only the top one is displaying with its rollovers in IE.  The top menu doesn't have any pull-downs on this site.


Menu calls for the TCADP site:

Top menu: (working)

Code: Select all

<div id="menu_top">
<h2 class="accessibility">Navigation</h2>
{cms_module module='menumanager' template='tcadpmenu' excludeprefix='left'} </div>
<hr class="accessibility" />

Left menu: (not working in IE6)

Code: Select all

<div id="menu_side">  {cms_module module='menumanager' template='tcadpmenu' excludeprefix='top'}  
</div>

Menu calls for the second site:
Top horizontal menu: (working)

Code: Select all

<div id="menu_top">
      {menu template='puytmenu' number_of_levels='1' excludeprefix='news'}
</div>

Left menus: (not working in IE6)

Code: Select all

<div id="menu_vert">

         <h2 class="accessibility">Sub Navigation</h2>

          {* NB! The <ul><li> below is only added because several default templates use the same menu stylesheet, to "force" the subnavigation to act as if it's the second level in a list *}
          <ul><li>{menu template='puytmenu' start_level='2' excludeprefix="news"}</li></ul>
{menu template='puytmenu' includeprefix="news"}
      <hr class="accessibility" />
      </div>

The templates for both sites are just the cssmenu.tpl that came with the install.  I haven't changed them at all.

Code: Select all

{* CSS classes used in this template:
#menuwrapper - The id for the <div> that the menu is wrapped in. Sets the width, background etc. for the menu.
#primary-nav - The id for the <ul>
.menuparent - The class for each <li> that has children.
.menuactive - The class for each <li> that is active or is a parent (on any level) of a child that is active. *}
{if $count > 0}
<div id="menuwrapper">
<ul id="primary-nav">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}

	{repeat string="<ul>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}

	{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
	</li>
{elseif $node->index > 0}</li>
{/if}
{if $node->parent == true or ($node->current == true and $node->haschildren == true)}
	<li class="menuactive menuparent"><a class="menuactive menuparent" 
{elseif $node->current == true}
	<li class="menuactive"><a class="menuactive" 
{elseif $node->haschildren == true}
	<li class="menuparent"><a class="menuparent" 
{elseif $node->type == 'sectionheader'}
        <li class="sectionheader"><span> {$node->menutext} </span>
{elseif $node->type == 'separator'}
        <li style="list-style-type: none;"> <hr class="separator" />
{else}
	<li><a 
{/if}
{if $node->type != 'sectionheader' and $node->type != 'separator'}
href="{$node->url}" {if $node->accesskey != ''}accesskey="{$node->accesskey}" {/if}{if $node->tabindex != ''}tabindex="{$node->tabindex}" {/if}{if $node->titleattribute != ''}title="{$node->titleattribute}"{/if}{if $node->target ne ""} target="{$node->target}"{/if}><dfn>{$node->hierarchy}: </dfn>{$node->menutext}</a>
{elseif $node->type == 'sectionheader'}
><dfn>{$node->hierarchy}: </dfn>{$node->menutext}</a>
{/if}

{/foreach}

	{repeat string="</li></ul>" times=$node->depth-1}		</li>
	</ul>
<div class="clearb"></div>
</div>
{/if}

[mran]

Well, I've tried all sorts of things, and have finally come to the conclusion that the problem is in the CSSmenu.js file, the one which is supposed to make a CSS menu work in something less than IE7.  It seems like it either only supports one menu--the first one in the document structure, OR, it would support more menus if only I knew what to change to make that happen.

But I don't.

HOWEVER, there is this nifty little folder available for download that I've been using on other sites for a while.
http://dean.edwards.name/IE7/  It's a set of js files for getting IE5 &6 to play nicely.  It's not perfect, there are some things that aren't fixed under it, but it does make drop-down menus work.

So for now, I'm using this, but I'm still interested to see if there's something else I should know how to do to make the original js included in the CMSMS installation work as intended.  Please let me know if you've managed to make two drop-down menus work properly, okay?  Thanks!

[KO]

First thing I notice is that your page does not validate. And when you start looking closer you notice that there is 2 times id="primary-nav" when ID can only be once in every page. What does this mean. JS file (IE6 only) is looking for ID that is "primary-nav" and finds first one but does not look for another as there should not be another one.

What you could do is to make another menu template for another fly-out menu that has "primary-nav2" and call that in your menu call in page template. Then make another js file with different name that has call for that ID instead of "primary-nav".

Hope this helps.
br, K