menu problem in IE7

[jan_hut]

Was wondering if anybody has an answer to this one. Searching the forums I couldn't find anything on it so here goes:

I've setup cmsmadesimple ages ago on http://www.formuleshop.nl . It's a basic install just as the owner wanted it to be. I've used the standard "CSSMenu Vert 1 col" menu which worked just fine. It was tested in Firefox and IE6 without any problems. However I just discovered that the menu doesn't work properly in IE7. The parent works but anything after that dissapears when trying to click on it. It's kind of hard to explain so I would appreciate it if any fellow boarders would take a look at it. Does anyone have any idea as to WHY this is happening.....and more importantly, how to fix it?

All help, as always,  is much appreciated!

[fatcuban]

Not sure if this is the answer your looking for and im no CSS guru, but I had a similar problem when my menu was layered behind another div. Try bringing you menu to the front by changing the z-index.

hope that helps

[jan_hut]

Unfortunately it doesn't. What I don't understand is how the DEFAULT vertical 1 col CSS menu doesn't work in IE7. And no one has posted anything about it. It's part of the default cmsms install! Anybody else have a clue?

[jan_hut]

I've fixed the issue somehow using the suggestion in this post: http://forum.cmsmadesimple.org/index.php/topic,8035.0.html

[JeremyBASS]

@jan_hut hey what is the code you used for the menu... I notice works and it looks like the stock css menu, but mine does not work.... soo.. if you'd be so kind could you past it up for comparison real quick?  I'd really appreciate the help on debugging my issue... Thank you and have a great one..

[jan_hut]

Im using the standard CSSMenu Vert 1 col template:

Formuleshop.nl - {title}

{metadata}
{stylesheet}

{cms_selflink dir="start" rellink=1}
{cms_selflink dir="prev" rellink=1}
{cms_selflink dir="next" rellink=1}

{global_content name='JavaScript for IE page width'}






#primary-nav li {margin-bottom: -3px;}
#primary-nav li:hover {margin-bottom:-4px;} /* a HACK!!! for IE7 */











   
   
      Skip to navigation
      {cms_selflink anchorlink='main' dir='anchor' text='Skip to content'}
   
   

   


 
 
          {cms_selflink dir="start"}
 
 
 

 



 
 

     
     
        Navigation
        {cms_module module='menumanager' template='cssmenu-accessible.tpl'}       
     
     
     


     
     
        {title}
        {content}


       


{cms_selflink anchorlink='main' dir='anchor' text='Top'}

       


     
     
 


 
 


 
 
      {global_content name='footer'}
 
 

With the Default CSSMenu Vertical stylesheet:

/* Vertical menu for the CMS CSS Menu Module */
/* by Alexander Endresen */


/* The wrapper determines the width of the menu elements */

#menuwrapper {
width: 100%;
}
/* IE Hack begin */
#primary-nav li, #primary-nav li.menuparenth { _float: left; _height: 1%; min-height:1em;}
#primary-nav li a { _height: 1%; min-height:1em;}
/* IE Hack end */



/* Unless you know what you do, do not touch this */
#primary-nav, #primary-nav ul {
list-style: none;
margin: 0px;
padding: 0px;
width: 100%;
    margin-left: -1px;
}
#primary-nav ul {
position: absolute;
top: 0;
left: 100%;
display: none;
}
#primary-nav li {
    margin-bottom: -1px;
position: relative;
}


/* Styling the basic apperance of the menu elements */

#primary-nav a {
border: 1px solid #006699;
display: block;
margin: 0px;
padding: 5px 10px;
text-decoration: none;
}
#primary-nav li, #primary-nav li.menuparent {
background-color: #ececec;
}


/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */

#primary-nav li.menuactive {
background-color: #C7C7C7;
}


/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */

#primary-nav li.menuparent, #primary-nav li.menuparent:hover, #primary-nav li.menuparenth {
background-image: url(modules/MenuManager/images/arrow.gif);
background-position: center right;
background-repeat: no-repeat;
}


/* Styling the apperance of menu items on hover */

#primary-nav li:hover, #primary-nav li.menuh, #primary-nav li.menuparenth, #primary-nav li.menuactiveh {
background-color: #E7AB0B;
}


/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */

#primary-nav ul, #primary-nav li:hover ul, #primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul, #primary-nav li.menuparenth ul ul {
display: none;
}
#primary-nav li:hover ul, #primary-nav ul li:hover ul, #primary-nav ul ul li:hover ul,
#primary-nav li.menuparenth ul, #primary-nav ul li.menuparenth ul, #primary-nav ul ul li.menuparenth ul {
display: block;
}


/* IE Hack, will cause the css to not validate */

#primary-nav li, #primary-nav li.menuparenth { _float: left; _height: 1%; }
#primary-nav li a { _height: 1%; }

I know the IE hack appears twice in the code but this works for me

[JeremyBASS]

no no... i was meaning the template code should look something like this...
*****just an example*****

Code: Select all

{if $count > 0}
<ul class="menu_horiz">
{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->index == 0}
{assign var="icon" value="house"}
{elseif $node->haschildren == true }
{assign var="icon" value="folder"}
{elseif $node->haschildren == false }
{assign var="icon" value="page"}
{/if}
{if $node->current == true}
<li style="list-style-image: url('/images/icons/{$icon}_go.png') ">{$node->menutext}
{else}
<li style="list-style-image: url('/images/icons/{$icon}.png') ">
{if $node->type == 'sectionheader'}
<span class="sectionheader{$node->depth}">{$node->menutext}</span>
{else}
<a href="{if $node->id == 15}/{else}{$node->url}{/if}"{if $node->target ne ""} target="{$node->target}"{/if}>{$node->menutext}</a>
{/if}
{/if}
<br>{$node->titleattribute}
{/foreach}
{repeat string="</li></ul>" times=$node->depth-2}</li>
</ul>
{/if}