Page 1 of 2

Menu problem - repeated <ul> - XHTML validation

Posted: Tue Dec 18, 2007 1:07 pm
by brippon
I've hit a problem with menu manager which I can't see see through - CMSMS v 1.2.

I want a left menu to show all of the children of a top-level node called Services - with collapse set to 1:

Code: Select all

{menu collapse='1' start_page='services' template='simple_navigation.tpl'}
It looks and works OK, but it won't XHTML validate as the code looks like:

Code: Select all

<ul>
<ul>
<li> ... </li>
<li> ... </li>
</ul>
</ul>
It's clearly something to do with

Code: Select all

{repeat string="<ul>" times=$node->depth-$node->prevdepth}
in the menu. I've tried variations on the start_level parameter, with no joy.

Any ideas anyone?

Brian

[solved] Re: Menu problem - repeated <ul> - XHTML validation

Posted: Sat Jan 12, 2008 3:28 pm
by cnymike
I've got the same problem. I was checking validation on several of my sites just now and they are showing this same problem.

Here is the portion of the invalid markup validation report...

Code: Select all

#  Error  Line 142, Column 3: document type does not allow element "ul" here; assuming missing "li" start-tag.

<ul>

✉
# Error Line 237, Column 15: XML Parsing Error: Opening and ending tag mismatch: ul line 141 and li.

</li></ul></li>

✉
# Error Line 238, Column 5: XML Parsing Error: Opening and ending tag mismatch: li line 139 and ul.

</ul>

✉
# Error Line 239, Column 11: XML Parsing Error: Opening and ending tag mismatch: ul line 139 and li.

<br /></li></ul>

✉
# Error Line 239, Column 16: XML Parsing Error: Opening and ending tag mismatch: div line 135 and ul.

<br /></li></ul>
I'm using CMSMS 1.2.3

And incidentally, the cmsmadesimple.org home page has 10 CSS validation issues

Code: Select all

URI : http://www.cmsmadesimple.org/stylesheet.php?templateid=16
181 		Value Error : min-width Property min-width doesn't exist : 0
181 		Combinator ~ between selectors is not allowed in this profile or version
220 		Unknown pseudo-element or pseudo-class %s
220 		Unknown pseudo-element or pseudo-class :only-child
220 		Unknown pseudo-element or pseudo-class %s
239 		Unknown pseudo-element or pseudo-class %s
239 		Unknown pseudo-element or pseudo-class :only-child
239 		Unknown pseudo-element or pseudo-class %s
244 	* 	Parse Error - *html p.features-more { display:none; }
URI : http://www.cmsmadesimple.org/stylesheet.php?templateid=16&mediatype=print
7 	body * 	Value Error : background-color none is not a color value : none

Re: Menu problem - repeated <ul> - XHTML validation

Posted: Sat Jan 12, 2008 7:51 pm
by Dr.CSS
What does it look like around your menu tags, just before and after including the menu tag, from template...

Re: Menu problem - repeated <ul> - XHTML validation

Posted: Sat Jan 12, 2008 9:08 pm
by cnymike
Mark, here is the entire template... and by the way the URL is http://www.fcap.org

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">
<!-- Change lang="en" to the language of your site -->

<head>

<title>{sitename} - {title}</title>
<!-- The sitename is changed in Site Admin/Global settings. {title} is the name of each page -->

{metadata}
<!-- Don't remove this! Metadata is entered in Site Admin/Global settings. -->

{stylesheet}
<!-- This is how all the stylesheets attached to this template are linked to -->

{cms_selflink dir="start" rellink=1}
{cms_selflink dir="prev" rellink=1}
{cms_selflink dir="next" rellink=1}
<!-- Relational links for interconnections between pages, good for accessibility and Search Engine Optmization -->



{literal}
<__script__ type="text/JavaScript">
<!--
//pass min and max -measured against window width
function P7_MinMaxW(a,b){
	var nw="auto",w=document.documentElement.clientWidth;
	if(w>=b){nw=b+"px";}if(w<=a){nw=a+"px";}return nw;
}
//-->
</__script>
<!--[if lte IE 6]>
<style type="text/css">
#pagewrapper {width:expression(P7_MinMaxW(720,950));}
#container {height: 1%;}
</style>
<![endif]-->
{/literal}
<!-- The min and max page width for Internet Explorer is set here. For other browsers it's in the stylesheet "Layout: Top menu + 2 columns" -->


</head>

</__body>

<div id="pagewrapper">

    <!-- start accessibility skip links -->
    <ul class="accessibility">
      <li>{anchor anchor='menu_vert' title='Skip to navigation' accesskey='n' text='Skip to navigation'}</li>
      <li>{anchor anchor='main' title='Skip to content' accesskey='s' text='Skip to content'}</li>
    </ul>
    <!-- end accessibility skip links -->


    <hr class="accessibility" />
    <!-- Horizontal ruler that is hidden for visual browsers by CSS -->


   <!-- Start Header, with logo image that links to the default start page. Logo image is changed in the stylesheet  "For template: Top menu + left submenu + 1 column" -->
   <div id="header">
           <h1>{cms_selflink dir="start" text="$sitename"}</h1>
   <hr class="accessibility" />
   </div>
   <!-- End Header -->


   <!-- Start Navigation -->
   <div id="menu_horiz">
      <h2 class="accessibility">Navigation</h2>
      {menu template='simple_navigation.tpl' number_of_levels='1'}
   <hr class="accessibility" />
   </div>
   <!-- End Navigation -->


   <!-- Start Search-->
   <div id="search">
          {search}
   </div>
   <!-- End Search -->

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


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

      <!-- Start Sidebar -->
      <div id="sidebar">

      <!-- Start Sub Navigation -->
      <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='simple_navigation.tpl' start_element='4' collapse='1'}<br /></li></ul>
      <hr class="accessibility" />
      </div>
      <!-- End Sub Navigation -->
   <!-- Start addressblock -->
   <div class="addressblock">
      {global_content name='addressblock'}
      <hr class="accessibility" />
   </div>
   <!-- End addressblock -->


      </div>
      <!-- End Sidebar -->


      <!-- Start Content Area -->
      <div id="main">
         <div style="float: right;">{print showbutton=true script=true}</div>
         <h2>{title}</h2>
         {content} <br />



         <!-- Start relational links -->
	 <div class="hr"></div>
	 <div class="right49">
	 	<p>{anchor anchor='main' text='^ Top'}</p>
	 </div>
         <div class="left49">
            <p>{cms_selflink dir="previous" label="Previous page: "} <br />
            {cms_selflink dir="next"}</p>
         </div>
         <!-- The label parameter doesn't need to be there if you're using English, but is here to show how it's used if you don't want the English text "Previous page" -->
	 <!-- End relational links -->

      <hr class="accessibility" />
      </div>
	  <!-- End Content Area -->


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


   <!-- Start Footer. Edit the footer in the Global Content Block called "footer" -->
   <div id="footer">
      {global_content name='footer'}
   </div>   
   <!-- End Footer  -->


</div><!-- end pagewrapper -->
<__body>
</__html>

Re: Menu problem - repeated <ul> - XHTML validation

Posted: Sat Jan 12, 2008 9:18 pm
by cnymike
It seems that the menu template is somehow generating an extra and tag for reasons I cannot quite grasp.

Re: Menu problem - repeated <ul> - XHTML validation

Posted: Sat Jan 12, 2008 9:21 pm
by Dr.CSS
It's in the template, just as I thought, I remember seeing this in a default install...

         
          {menu template='simple_navigation.tpl' start_element='4' collapse='1'}

     

Re: Menu problem - repeated <ul> - XHTML validation

Posted: Sat Jan 12, 2008 9:31 pm
by cnymike
So is this a bug in the default template? Should I fix this in the default template file itself?

Re: Menu problem - repeated <ul> - XHTML validation

Posted: Sat Jan 12, 2008 9:44 pm
by Dr.CSS
It's not a bug, as you will see in the comment above it, it was included for times when you may end up using it for a second level menu that starts under a section header that is set to not show in the menu...

{menu start_element="5.1" show_root_siblings="1"}

This call assumes you have 5 set as a section header not shown in menu so it starts at the first page below which would leave out the   because the section header would have been it and show_root_siblings will show all children of 5...

So for how you are using it just take out all marked in red, of course you can remove the comment also...

{menu template='simple_navigation.tpl' start_element='4' collapse='1'}

Re: Menu problem - repeated <ul> - XHTML validation

Posted: Sat Jan 12, 2008 9:50 pm
by cnymike
I tried removing the code you had highlighted in red and the page still does not validate. Actually the code ends up looking the same to me...

Code: Select all

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

      <!-- Start Sidebar -->
      <div id="sidebar">

      <!-- Start Sub Navigation -->
      <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>
<ul>

<li class="sectionheader">FCAP Main Menu


</li>

<li><a href="http://www.fcap.org/index.php?page=about-fcap"><dfn>4.2: </dfn>About FCAP</a>

</li>
Is it the simple_navigation.tpl causing the problem?

Re: Menu problem - repeated <ul> - XHTML validation

Posted: Sat Jan 12, 2008 9:58 pm
by cnymike
Mark,

When I remove the code you had in red and revalidate, I get 5 vaiidation errors

Code: Select all

Validation Output:  5 Errors

   1. Error Line 142, Column 3: document type does not allow element "ul" here; assuming missing "li" start-tag .
      <ul>
      ✉
   2. Error Line 237, Column 15: XML Parsing Error: Opening and ending tag mismatch: ul line 141 and li .
      </li></ul></li>
      ✉
   3. Error Line 238, Column 5: XML Parsing Error: Opening and ending tag mismatch: div line 135 and ul .
      </ul>
      ✉
   4. Error Line 309, Column 6: XML Parsing Error: Opening and ending tag mismatch: body line 55 and div .
      </div><!-- end pagewrapper -->
      ✉
   5. Error Line 310, Column 7: XML Parsing Error: Opening and ending tag mismatch: html line 4 and body .
      <__body>
     ✉

When I put the code in red back in and validate, I get this...

Code: Select all

Validation Output:  7 Errors

   1. Error Line 142, Column 3: document type does not allow element "ul" here; assuming missing "li" start-tag .
      <ul>
      ✉
   2. Error Line 237, Column 15: XML Parsing Error: Opening and ending tag mismatch: ul line 141 and li .
      </li></ul></li>
      ✉
   3. Error Line 238, Column 5: XML Parsing Error: Opening and ending tag mismatch: li line 139 and ul .
      </ul>
      ✉
   4. Error Line 239, Column 11: XML Parsing Error: Opening and ending tag mismatch: ul line 139 and li .
      <br /></li></ul>
      ✉
   5. Error Line 239, Column 16: XML Parsing Error: Opening and ending tag mismatch: div line 135 and ul .
      <br /></li></ul>
      ✉
   6. Error Line 309, Column 6: XML Parsing Error: Opening and ending tag mismatch: body line 55 and div .
      </div><!-- end pagewrapper -->
      ✉
   7. Error Line 310, Column 7: XML Parsing Error: Opening and ending tag mismatch: html line 4 and body .
      <__body>
      ✉

Re: Menu problem - repeated <ul> - XHTML validation

Posted: Sat Jan 12, 2008 10:36 pm
by cnymike
Source code of page without removing the code in red...

Code: Select all

<!-- Start Sub Navigation -->
      <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> 
<ul>
<ul>
<li class="sectionheader">FCAP Main Menu
</li>
<li><a href="http://www.fcap.org/index.php?page=about-fcap"><dfn>4.2: </dfn>About FCAP</a>
</li>
<li><a href="http://www.fcap.org/index.php?page=resources"><dfn>4.3: </dfn>Resources</a>
</li>
<li><a href="http://www.fcap.org/index.php?page=weekly-briefing"><dfn>4.4: </dfn>Weekly Briefing</a>
</li>
<li><a href="http://www.fcap.org/index.php?page=fcap-world-news"><dfn>4.5: </dfn>FCAP World News</a>
</li>
<li><a href="http://www.fcap.org/index.php?page=training-seminars"><dfn>4.6: </dfn>Training Seminars</a>
</li>
<li><a href="http://www.fcap.org/index.php?page=links-to-fcap-groups"><dfn>4.7: </dfn>Links to FCAP Groups & Ministry Partners</a>
</li>
<li><a href="http://www.fcap.org/index.php?page=events"><dfn>4.8: </dfn>Events</a>
</li>
<li><a href="http://www.fcap.org/index.php?page=prayer-fellowship"><dfn>4.9: </dfn>Prayer Fellowship</a>
</li>
<li class="sectionheader">FCAP Worldwide Contacts
</li>
<li><a href="http://www.fcap.org/index.php?page=africa"><dfn>4.11: </dfn>Africa</a>
</li>
<li><a href="http://www.fcap.org/index.php?page=asia"><dfn>4.12: </dfn>Asia</a>
</li>
<li><a href="http://www.fcap.org/index.php?page=canada"><dfn>4.13: </dfn>Canada</a>
</li>
<li><a href="http://www.fcap.org/index.php?page=caribbean"><dfn>4.14: </dfn>Caribbean</a>
</li>
<li><a href="http://www.fcap.org/index.php?page=europe"><dfn>4.15: </dfn>Europe</a>
</li>
<li><a href="http://www.fcap.org/index.php?page=mexico"><dfn>4.16: </dfn>Mexico</a>
</li>
<li><a href="http://www.fcap.org/index.php?page=south-america"><dfn>4.17: </dfn>South America</a>
</li>
<li><a href="http://www.fcap.org/index.php?page=south-pacific"><dfn>4.18: </dfn>South Pacific</a>
</li>
<li><a href="http://www.fcap.org/index.php?page=united-states"><dfn>4.19: </dfn>United States</a>
</li></ul></li>
</ul>
<br /></li></ul>
      <hr class="accessibility" />
      </div>
      <!-- End Sub Navigation -->
Source code when your code in red is removed...

Code: Select all

<!-- Start Sub Navigation -->
      <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>
<ul>
<li class="sectionheader">FCAP Main Menu
</li>
<li><a href="http://www.fcap.org/index.php?page=about-fcap"><dfn>4.2: </dfn>About FCAP</a>
</li>
<li><a href="http://www.fcap.org/index.php?page=resources"><dfn>4.3: </dfn>Resources</a>
</li>
<li><a href="http://www.fcap.org/index.php?page=weekly-briefing"><dfn>4.4: </dfn>Weekly Briefing</a>
</li>
<li><a href="http://www.fcap.org/index.php?page=fcap-world-news"><dfn>4.5: </dfn>FCAP World News</a>
</li>
<li><a href="http://www.fcap.org/index.php?page=training-seminars"><dfn>4.6: </dfn>Training Seminars</a>
</li>
<li><a href="http://www.fcap.org/index.php?page=links-to-fcap-groups"><dfn>4.7: </dfn>Links to FCAP Groups & Ministry Partners</a>
</li>
<li><a href="http://www.fcap.org/index.php?page=events"><dfn>4.8: </dfn>Events</a>
</li>
<li><a href="http://www.fcap.org/index.php?page=prayer-fellowship"><dfn>4.9: </dfn>Prayer Fellowship</a>
</li>
<li class="sectionheader">FCAP Worldwide Contacts
</li>
<li><a href="http://www.fcap.org/index.php?page=africa"><dfn>4.11: </dfn>Africa</a>
</li>
<li><a href="http://www.fcap.org/index.php?page=asia"><dfn>4.12: </dfn>Asia</a>
</li>
<li><a href="http://www.fcap.org/index.php?page=canada"><dfn>4.13: </dfn>Canada</a>
</li>
<li><a href="http://www.fcap.org/index.php?page=caribbean"><dfn>4.14: </dfn>Caribbean</a>
</li>
<li><a href="http://www.fcap.org/index.php?page=europe"><dfn>4.15: </dfn>Europe</a>
</li>
<li><a href="http://www.fcap.org/index.php?page=mexico"><dfn>4.16: </dfn>Mexico</a>
</li>
<li><a href="http://www.fcap.org/index.php?page=south-america"><dfn>4.17: </dfn>South America</a>
</li>
<li><a href="http://www.fcap.org/index.php?page=south-pacific"><dfn>4.18: </dfn>South Pacific</a>
</li>
<li><a href="http://www.fcap.org/index.php?page=united-states"><dfn>4.19: </dfn>United States</a>
</li></ul></li>
</ul>
<br />
      <hr class="accessibility" />
      </div>
      <!-- End Sub Navigation -->
So it looks like a more complicated issue than just removing the code in red.

Thanks for your help on this.

Micihael

Re: Menu problem - repeated <ul> - XHTML validation

Posted: Sun Jan 13, 2008 6:41 pm
by cnymike
Mark, or anyone...

It seems that there needs to be some additional logic in the simple_navigation.tpl file to deal with this issue don't you think? A site should validate and if a legitimate option to build a menu is used, the site should still validate. But it's not validating because of the extra code that is being put in.

Re: Menu problem - repeated <ul> - XHTML validation

Posted: Mon Jan 14, 2008 7:05 am
by Dr.CSS
What does your page structure look like, in Content > Pages?...

I have a default install and it uses the same template and it doesn't do this...

        Sub Navigation

                      These are in the template like above just before the {menu tag



3.1: CMSMS tags in the templates




By the way I like the google calendar embed...

Re: Menu problem - repeated <ul> - XHTML validation

Posted: Mon Jan 14, 2008 8:21 am
by RonnyK
I noticed the same behaviour as described, but only when the "Section Header" was used as content-type....

Ronny

Re: Menu problem - repeated <ul> - XHTML validation

Posted: Mon Jan 14, 2008 1:09 pm
by KO
Is that start_element='4' in second menu call "Section Header" ? i blieve simple_navigation.tpl will not cope very well in that situation. Neighter will any other template.

What you could do is to copy that simple_navigation.tpl and make simple_navigation2.tpl where you have removed first and last then make you menu call like:

{menu template='simple_navigation2.tpl' start_element='4' collapse='1'}

Then it probably validates as long as that start_element remains section header.