HTML Validation With Nested Menu <li>'s Options

[Rick5150]

I was wondering if there was a solution to this so I can get the code to validate? Because of the nested dropdown boxes, I get the following error message:

document type does not allow element "li" here; missing one of "ul", "ol", "menu", "dir" start-tag

I understand that normally I should close the "li" tag, but this is a CSS/HTML menu with no javascript or flash to make it work. I love everything else about it though. The test page can be seen here for now.

The six error messages are any menu with a submenu where the <li> tag was not closed until the bottom of the menu.

CODE

<!-- START FILMJACKETS MENU -->
<ul class="filmjacketsMenu filmjacketsMenum">

<!-- HOME MENU -->
    <li class="filmjacketsMenui"><a class="filmjacketsMenui" href="http://www.filmjackets.com" title="Back to FILMJACKETS.COM">Home</a></li>

<!-- ABOUT US MENU -->    
    <li class="filmjacketsMenui"><a class="filmjacketsMenui" href="#" title="About FILMJACKETS.COM">About Us</a>
    <ul class="filmjacketsMenum">
        <li class="filmjacketsMenui"><a class="filmjacketsMenui" href="#" title="Who Is FILMJACKETS.COM?">Who Are We</a></li>
        <li class="filmjacketsMenui"><a class="filmjacketsMenui" href="#" title="Where Is FILMJACKETS.COM?">Where Are We?</a></li>
        <li class="filmjacketsMenui"><a class="filmjacketsMenui" href="#" title="What Does FILMJACKETS.COM Do?">What Do We Do?</a></li>
        <li class="filmjacketsMenui"><a class="filmjacketsMenui" href="#" title="Why Choose FILMJACKETS.COM?">What Makes Us Different?</a></li>
</ul></li>

<!--JACKETS MENU -->
    <li class="filmjacketsMenui"><a class="filmjacketsMenui" href="#">Jackets</a>
    <ul class="filmjacketsMenum">
        <li class="filmjacketsMenui"><a class="filmjacketsMenui" href="#" title="Film and Movie Jackets">Film Jackets</a>
            <ul class="filmjacketsMenum">
                <li class="filmjacketsMenui"><a class="filmjacketsMenui" href="#" title="Jackets Where Manufacturer is Confirmed">Confirmed Jackets</a></li>
                <li class="filmjacketsMenui"><a class="filmjacketsMenui" href="#" title="We Are Pretty Sure About These">Accredited Jackets</a></li>
                <li class="filmjacketsMenui"><a class="filmjacketsMenui" href="#" title="We're Still Working On These">In Progress</a></li>
        </ul></li>
        
        <li class="filmjacketsMenui"><a class="filmjacketsMenui" href="#" title="Jackets Seen on Television">Television Jackets</a>
            <ul class="filmjacketsMenum">
                <li class="filmjacketsMenui"><a class="filmjacketsMenui" href="#" title="Jackets Where Manufacturer is Confirmed">Confirmed Jackets</a></li>
                <li class="filmjacketsMenui"><a class="filmjacketsMenui" href="#" title="We Are Pretty Sure About These">Accredited Jackets</a></li>
                <li class="filmjacketsMenui"><a class="filmjacketsMenui" href="#" title="We're Still Working On These">In Progress</a></li>
        </ul></li>
        <li class="filmjacketsMenui"><a class="filmjacketsMenui" href="#" title="Music/Band & Rock Star Jackets">Music/Band Jackets</a></li>
        <li class="filmjacketsMenui"><a class="filmjacketsMenui" href="#" title="Miscellaneous Celebrity Jackets">Celebrity Jackets</a></li>
    </ul>
    
<!-- VENDORS MENU -->    
    <li class="filmjacketsMenui"><a class="filmjacketsMenui" href="#" title="Our Confirmed Vendors">Vendors</a>
    <ul class="filmjacketsMenum">
        <li class="filmjacketsMenui"><a class="filmjacketsMenui" href="http://www.filmjackets.com/website/pages/vendor_list.htm" title="Vendor List">Vendor List</a></li>
        <li class="filmjacketsMenui"><a class="filmjacketsMenui" href="#" title="Original Vendors">Original Vendors</a>
            <ul class="filmjacketsMenum">
                <li class="filmjacketsMenui"><a class="filmjacketsMenui" href="#" title="Bates Custom Leather">Bates Custom Leather</a></li>
                <li class="filmjacketsMenui"><a class="filmjacketsMenui" href="#" title="Jonathan A. Logan">Jonathan A. Logan</a></li>
                <li class="filmjacketsMenui"><a class="filmjacketsMenui" href="#" title="Ocean Drive Leather">Ocean Drive Leather</a></li>
                <li class="filmjacketsMenui"><a class="filmjacketsMenui" href="#" title="Original Leather Factory">Original Leather Factory</a></li>
                <li class="filmjacketsMenui"><a class="filmjacketsMenui" href="#" title="Schott, NYC">Schott, NYC</a></li>
                <li class="filmjacketsMenui"><a class="filmjacketsMenui" href="#" title="Vanson Leathers, Inc.">Vanson Leathers, Inc.</a></li>
                </ul></li>
        <li class="filmjacketsMenui"><a class="filmjacketsMenui" href="#" title="Replica Vendors">Replica Vendors</a>
            <ul class="filmjacketsMenum">
                <li class="filmjacketsMenui"><a class="filmjacketsMenui" href="#" title="Our Own FILMJACKETS.COM Jacket Line">Filmjackets.Com</a></li>
                <li class="filmjacketsMenui"><a class="filmjacketsMenui" href="#" title="Magnoli Clothiers">Magnoli Clothiers</a></li>
        </ul></li>
    </ul></li>
    
<!-- NEWS MENU -->    
    <li class="filmjacketsMenui"><a class="filmjacketsMenui" href="#" title="News">News</a>
    <ul class="filmjacketsMenum">
        <li class="filmjacketsMenui"><a class="filmjacketsMenui" href="#" title="FILMJACKETS.COM News">Filmjackets.Com News</a></li>
        <li class="filmjacketsMenui"><a class="filmjacketsMenui" href="#" title="Industry News">Industry News</a></li>
    </ul></li>
    
<!-- FRIENDS OF FILMJACKETS.COM MENU -->    
    <li class="filmjacketsMenui"><a class="filmjacketsMenui" href="#" title="Friends of FILMJACKETS.COM">Friends</a></li>
    
<!-- FREQUENTLY ASKED QUESTIONS MENU -->
    <li class="filmjacketsMenui"><a class="filmjacketsMenui" href="#">FAQs</a></li>
    
<!-- STORE MENU -->
    <li class="filmjacketsMenui"><a class="filmjacketsMenui" href="#" title="FILMJACKETS.COM Store">Store</a></li>
    
<!-- FILMJACKETS.COM FORUMS MENU -->
    <li class="filmjacketsMenui"><a class="filmjacketsMenui" href="#" title="FILMJACKETS.COM Message Board">Forums</a></li>
</li>    
</ul>

<!-- END FILMJACKETS MENU -->

[Christian J]

From a quick look it seems

CODE

<!--JACKETS MENU -->
    <li class="filmjacketsMenui">

is not closed when you start

CODE

<!-- VENDORS MENU -->    
    <li class="filmjacketsMenui">

Just after that, it seems you start a TABLE inside a link element (which is not valid) for IE6 and older? FWIW this particular Conditional Comment syntax can't validate:

CODE

<![if gt IE 6]>

[Rick5150]

Thank you for the response, but that is not from the code that I posted above though.

For some reason Expression Web was not saving the files. I tried many times saving the files and updating the DWT only to look on Mozilla and see the "old" version. That is why I posted it above without the IE6 referencess. I closed Expression Web and reopened the files and they still showed the old version in both Windows Explorer and Mozilla. I have that worked out now, but that is not the validation issue. It is the code I listed here:

document type does not allow element "li" here; missing one of "ul", "ol", "menu", "dir" start-tag

Once you close the <li> tags, the menus do not work properly...

[pandy]

Thank you for the response, but that is not from the code that I posted above though.

Neither is the error message you posted. All I get with the sample code is...

CODE

    * Line 83, character 5:

      </li>    
          ^

      Error: end tag for element LI which is not open; try removing the end tag or check for improper nesting of elements

...which refers to one of the closing tags here.

CODE

81   <!-- FILMJACKETS.COM FORUMS MENU -->
82       <li class="filmjacketsMenui"><a class="filmjacketsMenui" href="#" title="FILMJACKETS.COM Message Board">Forums</a></li>
83   </li>

[Frederiek]

The </li> of line 83 should be the closing tag of JACKETS MENU. See the missing </li> on line 44, to close the starting <li> on line 26?

CODE

25   <!--JACKETS MENU -->
26       <li class="filmjacketsMenui"><a class="filmjacketsMenui" href="#">Jackets</a>
27       <ul class="filmjacketsMenum">
28           <li class="filmjacketsMenui"><a class="filmjacketsMenui" href="#" title="Film and Movie Jackets">Film Jackets</a>
29               <ul class="filmjacketsMenum">
30                   <li class="filmjacketsMenui"><a class="filmjacketsMenui" href="#" title="Jackets Where Manufacturer is Confirmed">Confirmed Jackets</a></li>
31                   <li class="filmjacketsMenui"><a class="filmjacketsMenui" href="#" title="We Are Pretty Sure About These">Accredited Jackets</a></li>
32                   <li class="filmjacketsMenui"><a class="filmjacketsMenui" href="#" title="We're Still Working On These">In Progress</a></li>
33           </ul></li>
34          
35           <li class="filmjacketsMenui"><a class="filmjacketsMenui" href="#" title="Jackets Seen on Television">Television Jackets</a>
36               <ul class="filmjacketsMenum">
37                   <li class="filmjacketsMenui"><a class="filmjacketsMenui" href="#" title="Jackets Where Manufacturer is Confirmed">Confirmed Jackets</a></li>
38                   <li class="filmjacketsMenui"><a class="filmjacketsMenui" href="#" title="We Are Pretty Sure About These">Accredited Jackets</a></li>
39                   <li class="filmjacketsMenui"><a class="filmjacketsMenui" href="#" title="We're Still Working On These">In Progress</a></li>
40           </ul></li>
41           <li class="filmjacketsMenui"><a class="filmjacketsMenui" href="#" title="Music/Band & Rock Star Jackets">Music/Band Jackets</a></li>
42           <li class="filmjacketsMenui"><a class="filmjacketsMenui" href="#" title="Miscellaneous Celebrity Jackets">Celebrity Jackets</a></li>
43       </ul>
44      
45   <!-- VENDORS MENU -->

[Rick5150]

That was exactly the problem! Thank you!

[Frederiek]

You're welcome.

[Christian J]

Thank you for the response, but that is not from the code that I posted above though.

I ran it through http://www.htmlhelp.com/cgi-bin/validate.c...t/new/index.htm and that was the only error I found that matched your description. It seems to be fixed now, but there are still other ones.

[Rick5150]

As little as I know about CSS/HTML, I know even less about javascript. I used the http://validator.w3.org/check and ran the page through by the Validate by URI tab instead of the direct input and got 62 errors and 10 warnings!

Most seem to be related to the scrolling image slider.

The rest appear to be associated with the links that direct back to the ZenCart site because of ampersands and "=" signs.

Very frustrating, since I have no idea how to fix any of these. Most seem to be redundant so if I can fix one, I can fix many that give the same error message.

[Christian J]

http://www.htmlhelp.com/cgi-bin/validate.c...t/new/index.htm (but not http://validator.w3.org/check?uri=http://w...t/new/index.htm ) complains about some MS Office bloat on line 2.

Both complain about HTML strings in javascript, can't remember ever seeing such complaints before. E.g. on line 184:

CODE

leftrightslide[0]='<a href="website/images/slider/img_4_lg.jpg"><img src="website/images/slider/img_4.jpg"></a>'

To avoid it you might put the script in an external JS file.

The IMG elements in the JS strings use HTML syntax (it should be XHTML since the rest of the page uses that), also the IMGs lack ALT attributes, but if you move the JS to an external file the validator will not see these errors anyway.

JS document.write is not allowed in XHTML.

I also noticed the Netscape4 element ILAYER, which suggests the script is ancient.

The rest appear to be associated with the links that direct back to the ZenCart site because of ampersands and "=" signs.

Regarding ampersands, see http://www.htmlhelp.com/tools/validator/problems.html.en#amp

An ID value must begin with a letter: http://www.w3.org/TR/html401/types.html#type-name (can't find an explicit XHTML reference, but in my understanding the XHTML spec builds on the HTML4 one).

[Rick5150]

Again, thank you for the help. I made the site using a template and highly modified it so it did what I wanted it to. Of course, it was not well-written and I want to redo the site but have the code a lot tighter. I really appreciate the time and effort taken to help me out.