Validation of Navigation (W3s)

The following is the script for a site navigation:

Code:

---

<ul id="dropnav">
                <li><a href="index.html">Home</a>
                <li><a href="about.html">About</a><ul>
                      <li><a href="comfor.html">Community Forum</a></li>
                      <li><a href="admincom.html">Administration Committee</a></li>
                      <li><a href="repcom.html">Representative Committees</a></li>
                      <li><a href="workgroup.html">Working Groups</a></li></ul>
                <li><a href="assets.html">Assets</a>
                <li><a>Issues</a><ul>
                      <li><a href="list1.html">List 1</a></li>
                      <li><a href="list2.html">List 2</a></li></ul>
                <li><a href="lapr.html">LAPR</a>
                <li><a href="contact.html">Contact</a></li>
                <li><a href="links.html">Links</a></li>
            </ul>

---

Using the W3s Mark Up Validation Service it repetatively draws attention to the following Error example:-


Error Line 34, Column 20: document type does not allow element "li" here; missing one of "ul", "ol", "menu", "dir" start-tag

<li><a href="lapr.html">LAPR</a>

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

I am not getting the meaning of this message - is there a workaround to resolve the error?

You seem to be missing some </UL> and </LI> closing tags.

See for instance http://www3.fitnyc.edu/gene_chin/c2/...rim/index.html

These are "paired" tags with open and close tags <UL>unordered bullets</UL> or ordered numbers <OL><LI>list item </LI></OL>. The nested lists are inside the <LI> list item </LI> pair of tags -- like you would nest a <TABLE><TR><TD><table><tr><td>...</td></tr></table></TD></TABLE> inside a cell. Think of a box (with a top and bottom) into which you are putting something else (e.g., another box, with a top and bottom).

Code:

---

<ol>
      <li>History
          <ol>
              <li>Yellow Turban Rebellion</li>
              <li>Battle of Red Cliffs
                    <ol>
                          <li>Background</li>
                          <li>Battle</li>
                    </ol>
              </li>
              <li>Three Emperors</li>
              <li>Wu and the South</li>
            </ol>
      </li>
   
      <li>Decline and End of the Three Kingdoms        
            <ol>
                <li>Fall of Shu</li>
                <li>Fall of Wei</li>
            </ol>
      </li>
   
      <li>Population</li>

      <li>Economy</li>

</ol>

---

That worked great and facilitated in removing a large number of errors from the navigation.:)

Just one more thing on a seperate (navigation) button that links to a slideshow. The slideshow is presented in a popup window that I have written as follows:

Code:

---

<li><a href=javascript:popUpSlideshow("slideshow.htm")>View Forum Gallery</a></li>

---

This works fine but the W3s validation advises of the following:

Error Line 74, Column 56: character "(" not allowed in attribute specification list

Is there a more up to date way of writing the code to remove this error?

Yes. For ALL attributes always enclose them in quotation marks:

Code:

---

<li><a href="javascript:popUpSlideshow('slideshow.htm')">View Forum Gallery</a></li>

---

What you have at the moment has not been valid for many years, if ever.

Note that this requires switching all internal quotation marks to single quotes (apostrophes) so that they don't conflict with the containing quotes. That will be fine in this example. The alternative is to "escape" them in the following way:

Code:

---

<li><a href="javascript:popUpSlideshow(\"slideshow.htm\")">View Forum Gallery</a></li>

---

The slashes disable them for the outermost layer of code.

Thanks djr33,

That resolved that issue perfectly.

Caught on this final issue with a character countdown feature on a textarea:-

Code:

---

<td><b>Your Message</b><font size="1">(Max characters: 1500)</font><input readonly type="text" name="countdown" size="3" value="1500"/></td>

---

The above code does the job but the W3s validator advises of the following error!

Error Line 148, Column 122: the name and VI delimiter can be omitted from an attribute specification only if SHORTTAG YES is specified and it goes on to identify as follows:

<input readonly type="text" name="countdown"

Again, my code may be a bit primitive here - is there a better way to address the error and beat the Validator?:o