Vertical Menu Doesn't Close, Styling Bleeds Into Other Content

[hotaru]

Hi! I am building a site in version 0.12.1, which I love.  I'm using the Menu Manager to create EllNav style menus, and have a problem with the vertical menu on some of the pages .

On only certain pages, it seems that the menu fails to close, and the styling "bleeds" into the other content:

http://birthingway.org/test/Consumer_Info.html

Looks even worse on its children:

http://birthingway.org/test/Annual_Security_Report.html

What confuses me, is I use the exact same template, menu, & CSS on other pages, and don't have this problem. When I validate the "bad" pages I get errors like:

Line 124 column 11: end tag for "li" omitted, but OMITTAG NO was specified.

I will freely admit that I don't entirely understand the details of how the menu works, and I can't for the life of me figure out what it doesn't like about this particular page.

Any help is VERY much appreciated!

[kwansan]

Hi,

Hi! I am building a site in version 0.12.1, which I love.  I'm using the Menu Manager to create EllNav style menus, and have a problem with the vertical menu on some of the pages .

On only certain pages, it seems that the menu fails to close, and the styling "bleeds" into the other content:

http://birthingway.org/test/Consumer_Info.html

Looks even worse on its children:

http://birthingway.org/test/Annual_Security_Report.html

I tested your page links in ff and ie and vertical menu is opening and closing when I navigate to other pages.  So I am guessing you got this worked out.

What confuses me, is I use the exact same template, menu, & CSS on other pages, and don't have this problem. When I validate the "bad" pages I get errors like:

Line 124 column 11: end tag for "li" omitted, but OMITTAG NO was specified.

What doctype are you specifying for this page and are you validating for the same doctype? 

Sincerely,
David

[hotaru]

Hi David! Thanks for your reply.

I tested your page links in ff and ie and vertical menu is opening and closing when I navigate to other pages.  So I am guessing you got this worked out. Smiley

I have not gotten it fixed, I just changed some of the color settings in the menu so that the problem isn't as noticable to the casual viewer. 

What doctype are you specifying for this page and are you validating for the same doctype?

I've just adapted the default templates that came with the installation, so XHTML 1.0 Transitional. The pages where the menu works correctly validate.

Here's what I see on the "bad" pages in both FF and IE:



See how the side borders of the menu have run down into the search box?  It was even worse before, because I had it set to color the parent too, and then the search box would turn purple.

This problem only happens in two sections of the site:
http://birthingway.org/test/Consumer_Info.html
http://birthingway.org/test/06-07_catalog.html

...and their children. If you click around to other pages on the site, you'll see it's working correctly.

At this point my theory is that it just doesn't like menu items that start with the letter "C"

- Genevieve

[Dr.CSS]

i see a diff. in your page source i think this is from a 'good' page... History and Culture..

        Sub Navigation

         

2.1: History and Culture

2.2: Guiding Principles and Philosophy
2.3: Faculty Bios
2.4: Consumer Information



 

Sub Navigation

         

2.1: History and Culture
2.2: Guiding Principles and Philosophy
2.3: Faculty Bios
2.4: Consumer Information

2.4.1: Annual Security Reports

2.4.2: FERPA
2.4.3: Student Right To Know
2.4.4: NCES IPEDS Website


 

with only 1 in 'bad' page did you change the menu template at all?.....

    mark

[hotaru]

2 with only 1 in 'bad' page did you change the menu template at all?.....

Bizarre, isn't it? Both "History and Culture" and "Consumer Info" use the same template (and thus menu & stylesheets), but for some reason on "Consumer Info" and its children, the lists don't close.

I'm still hoping there's something obvious I've done wrong and I can have "head-->desk" moment.

[Dr.CSS]

is it standard menu? or did you change the menu template at all?.....

  mark

[hotaru]

is it standard menu? or did you change the menu template at all?.....

I would be afraid to do such a thing. It's ellnav-accessible.tpl

Perhaps something in the way I call it? Code in the template is:

Code: Select all

      <!-- Start Navigation -->
      <div id="menu_vert">
         <h2 class="accessibility">Sub Navigation</h2>
         {cms_module module='menumanager' template='ellnav-accessible.tpl' start_level='2' collapse='1'}<div class="hr0"></div>  
<br/>
<div id="searchbox" style="text-align: center;"><form method="get" action="http://birthingway.org/test/index.php">
<input type="text" id="query_string" name="pisearch" size="10" maxlength="50" value="" /> <input type="hidden" value="search" name="page" /> <input type="submit" id="buttonSearch" value="Search" />
</form></div><br/>
 <div class="hr0"></div>  
      </div>

      <!-- End Navigation -->

Seems like the CSS shouldn't be causing it, but here it is for the menu:

Code: Select all

#menu_vert, #menu_vert ul {
  margin: 0;
  padding: 0;
  }

#menu_vert ul {
  width: 100%; /* Width of Menu Items */
  border-top: 1px solid #ccccff;
  border-right: 1px solid #ccccff;
  border-left: 1px solid #ccccff;
  background: #ffffff;  
  }
#menu_vert li {
  width: 100%;
  list-style: none;
  }

#menu_vert li a {
  display: block;
  text-decoration: none;
  font-weight: normal;
  padding: 5px 5px 5px 10px;
  border-bottom: 1px solid #ccccff;
  color: #000000;
  }

 /*Fix IE. Hide from IE Mac */
 * html #menu_vert li { float: left; height: 1%; }
 * html #menu_vert li a { height: 1%; }
 /*End */


#menu_vert ul ul {
  width: 100%; /* Width of Menu Items */
  border-top: 0px solid #ccccff;
  border-right: 0px solid #ccccff;
  border-left: 0px solid #ccccff;
  border-bottom: 1px solid #ccccff;
  padding-bottom: 5px;
  background: #ffffff;  
  }

    div#menu_vert ul ul li a, 
    div#menu_vert ul ul li a:link, 
    div#menu_vert ul ul li a:visited  {
        display: block;
        padding: 3px 5px 3px 25px;
        border-bottom: none;
        font-size: 90%;
    }

    div#menu_vert ul ul ul  {
      border-bottom: none;
    }

    div#menu_vert ul ul ul li a, 
    div#menu_vert ul ul ul li a:link, 
    div#menu_vert ul ul ul li a:visited  {
        padding-left: 40px;
    }

#menu_vert li ul li a { padding: 5px 5px; } /* Sub Menu Styles */

/* fixed image flicker by adding .cssmenu-vertical ul */

#menu_vert li a:hover {
	background-color: #9999ff;
}

.current
{
	list-style-type: square;
	display: inline;
        background-color: #ffffff;
}

#menu_vert li.activeparent {
   background-color: #ffffff;
      }

#menu_vert li.active01 h3 {
  display: block;
  padding: 5px 5px 5px 10px;
  border-bottom: 1px solid #ccccff;
  color: #000000;
  margin: 0;
  font-size: 90%;
  line-height: 1em;
  background-color: #ccccff;
  }

#menu_vert li.active02 h3 {
  display: block;
  padding: 3px 5px 3px 25px;
  border-bottom: none;
  font-size: 90%;
  font-weight: bold;
  color: #000000;
  background-color: #ffffff;
  margin: 0;
 }

#menu_vert li.active03 h3 {
  display: block;
  padding: 3px 5px 3px 40px;
  border-bottom: none;
  font-size: 90%;
  font-weight: bold;
  color: #000000;
  margin: 0;
}

li.sectionheader {
  margin: 0;
  margin-right: -1px;
 }
li.sectionheader h3 {
   margin: 0;
   padding: 1em 10px 0.5em 10px;
   border: none;
   background-color: #ffffff;
  border-bottom: 1px solid #ccccff;
  z-index: 90;
}

li.separator {
   height: 1px;
   padding: 0.5em 0;
   margin: 0;
   width: 100%;
   border-bottom: 1px dotted black;
	}

Thanks again for your help!

-- Genevieve

[Dr.CSS]

this comes from,, You are here: Home � Menus/Navigation systems � Split Menu (EllNav) ,,page on a fresh clean install i keep just for this kind of thing,, handy...

On this page we have inserted {cms_module module='menumanager' template='ellnav-accessible.tpl' number_of_levels='1'} in the template where we want the top level to be displayed and
{cms_module module='menumanager' template='ellnav-accessible.tpl' start_level='2' collapse='1'}
where we want the sub-levels to display.

do you have the first one for the upper menu?
CSS just tells it how to dress and where to go... sorta like a wife... no offence to the wives out there.... 

    mark

[hotaru]

Hi again!

do you have the first one for the upper menu?

Yep, the top menu is working fine so I didn't post the code. But here's the whole Main Template I'm using, if it helps:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<__html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<!-- Type the title of your site here -->
<title>Birthingway - {title}</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'}
</head>

</__body>

<div id="pagewrapper">
<div id="container">

    <!-- start accessibility skip links -->
    <ul class="accessibility">
      <li><a href="#menu_vert" accesskey="s" title="Skip to navigation">Skip to navigation</a></li>
      <li><a href="#main">Skip to content</a></li>
    </ul>
    <!-- end accessibility skip links -->

 <div class="hr0"></div>  


  <!-- Start Header, with logo image that links to the default start page -->
   <div id="header" class="clearfix">
            <div id="header_left"><h1>{cms_selflink dir="start"}</h1> </div>
   <div id="header_right"><h1>{cms_selflink dir="start"}</h1> </div>

   </div>
   <!-- End Header -->

      <!-- Start Horizontal Menu -->
      <div id="menu_horiz">
         <h2 class="accessibility">Main Navigation</h2>
         <div id="wrapper">
         {cms_module module='menumanager' template='ellnav-accessible.tpl' number_of_levels='1'}
         </div>
      </div>
      <!-- End Horizontal Menu -->


   <!-- Start Breadcrumbs -->
   <div class="breadcrumbs">
        {breadcrumbs starttext='You are here' root='front_page' delimiter='»'}
 <div class="hr0"></div>  
   </div>
   <!-- End Breadcrumbs -->


   <!-- Start Content (Navigation and Content columns) -->
   <div id="content" class="clearfix">

      <!-- Start Navigation -->
      <div id="menu_vert">
         <h2 class="accessibility">Sub Navigation</h2>
         {cms_module module='menumanager' template='ellnav-accessible.tpl' start_level='2' collapse='1'}<div class="hr0"></div>  
<br/>
<div id="searchbox" style="text-align: center;"><form method="get" action="http://birthingway.org/test/index.php">
<input type="text" id="query_string" name="pisearch" size="10" maxlength="50" value="" /> <input type="hidden" value="search" name="page" /> <input type="submit" id="buttonSearch" value="Search" />
</form></div><br/>
 <div class="hr0"></div>  
      </div>

      <!-- End Navigation -->


      <!-- Start Content Area -->
      <div id="main" class="clearfix">

         <h2>{title}</h2>
      {content} 

<div class="clearfix">
 <div class="hr0"></div> </div>

         <!-- Start relational links -->
	 <div class="hr"></div>
	 <div class="right49">
	 	<p><a href="#main">^ Top</a></p>
	 </div>
    
	 <!-- End relational links -->

</div>
      
	  <!-- End Content Area -->

   </div>
   <!-- End Content -->
<div class="clearfix">
 </div>
</div><!-- end container -->
</div><!-- end pagewrapper -->


<__body>
</__html>

CSS just tells it how to dress and where to go...

I know, but I'm grasping at straws here.

-- Genevieve

[Dr.CSS]

just for kix make a new menu, in  Layout » Menu Manager  clik  Add Template ... copy/paste this in it, give it a name, clik  Submit, then use that name in your template...

template='whateveryounamedit'  note no .tpl

  let's see what that does.... for fun...

    mark

{* CSS classes used in this template:
.activeparent - The top level parent when a child is the active/current page. Used both for the horizontal main menu and the top level in the vertical submenu.
li.active0n h3 - n is the depth/level of the node. To style the active page for each level separately. The active page is not clickable.
.clearfix - Used for the unclickable h3 to use the entire width of the li, just like the anchors. Also used for the horizontal to use the entire width of the block element that it is wrapped in. See the Tools stylesheet in the default CMSMS installation.
li.sectionheader h3 - To style section header
hr.separator - To style the ruler for the separator *}
{if $count > 0}

{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="" times=$node->depth-$node->prevdepth}
{elseif $node->depth prevdepth}

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

{elseif $node->index > 0}
{/if}
{if $node->current == true && $node->depth == 1}
depth}">{$node->hierarchy}: {$node->menutext}
{elseif $node->current == true && $node->depth > 1}
depth-1}">{$node->hierarchy}: {$node->menutext}
{elseif $node->parent == true && (($node->depth == 1) or ($node->depth == 2))}
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}>{$node->hierarchy}: {$node->menutext}{elseif $node->type == 'sectionheader'}
{$node->menutext}{elseif $node->type == 'separator'}

{else}
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}>{$node->hierarchy}: {$node->menutext}{/if}
{/foreach}

{repeat string="" times=$node->depth-2}

{/if}

[hotaru]

  let's see what that does.... for fun...

Done. Looks the same to me.

--Genevieve

[Dr.CSS]

S**T hhmmm time to call in Elijah Lofgren, you out there Elijah... the menu marvel

sorry

    mark

[hotaru]

That's okay! Thanks for all your help. It's actually kind of nice to know that it's not just me. 

--Genevieve

[Elijah Lofgren]

hhmmm time to call in Elijah Lofgren, you out there Elijah... the menu marvel

I'm here now. 

I think I found a fix for the problem.

Attached are two images a "before" and an "after" of part of this page: http://birthingway.org/test/Annual_Security_Report.html

The only thing I changed between them was adding an closing tag (I'm guessing there is a bug in the menu template code somewhere).

Try adding the closing in your templat by replacing this section of your template:

Code: Select all

      <!-- Start Navigation -->
      <div id="menu_vert">
         <h2 class="accessibility">Sub Navigation</h2>
         {cms_module module='menumanager' template='ellnav-accessible.tpl' start_level='2' collapse='1'}<div class="hr0"></div> 
<br/>
<div id="searchbox" style="text-align: center;"><form method="get" action="http://birthingway.org/test/index.php">

with this:

     
     
        Sub Navigation
        {cms_module module='menumanager' template='ellnav-accessible.tpl' start_level='2' collapse='1'}

I'm not sure if this fix will mess up the pages that don't have this problem, but it's worth a try IMO. 

[attachment deleted by admin]

[Dr.CSS]

i thought of that, but if that is used in a template and the template is used on more than that page it may interfere with the function/appearance of the other page... hoping there was some way to add it to the loop the menu template goes thru, it seems to be stopping some where in the loop to drop the that it is putting on the other pages menu, that shows up w/o the 'bleeding', at one time the purple, of the active menu item, was coloring the background of the search box, but now the trouble/problem seems to be the structure of the rendered menu list, which looks at this point almost ok on the page, except the border line down one side, leaving it open to problems in the future, another item in the menu and it could all screw up again, or not allow it to validate HTML/CSS or reader rendering....

just my ramble on the problem... hmm

  mark