Page 1 of 1

menu problem in IE7

Posted: Fri Feb 15, 2008 5:40 pm
by 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!

Re: menu problem in IE7

Posted: Fri Feb 22, 2008 9:42 am
by 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

Re: menu problem in IE7

Posted: Mon Mar 03, 2008 9:52 pm
by 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?

Re: menu problem in IE7

Posted: Mon Mar 03, 2008 10:10 pm
by jan_hut
I've fixed the issue somehow using the suggestion in this post: http://forum.cmsmadesimple.org/index.php/topic,8035.0.html

Re: menu problem in IE7

Posted: Tue Mar 04, 2008 5:47 pm
by 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..

Re: menu problem in IE7

Posted: Wed Mar 05, 2008 8:11 pm
by 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

Re: menu problem in IE7

Posted: Wed Mar 05, 2008 8:15 pm
by 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}