Help: Categories InfoBox to unsorted list menu and CSS

[birdrockdesigns 1]

I'm trying to use this contribution http://www.oscommerce.com/community/contributions,7668/page,20 which basically converts the existing categories menu to an unordered list which can be styled with CSS.

 

Everything looks and works fine, however there are missing </li> tags on certain pages.

 

The author of the contribution posted an example site, and you can see this url http://store.averagejoe2pro.com/Fluid-and-Fuel has errors (I'm using Firefox with HTML Tidy and Firebug).

 

Here is the code from that url:

<div id="categoryBoxContainer" class="ui-widget infoBoxContainer">
<div class="moduletable">
   	<ul class="menu">
       	<li id="current" class="parent active item31"><a href="http://store.averagejoe2pro.com/index.php?cPath=31"><img src="/images/stories/31.png" align="left" alt="img_31" /><span class="itemParentName level0">Tune Your Engine</span></a>
          <ul class="level1">
               	<li class="parent item32"><a href="http://store.averagejoe2pro.com/index.php?cPath=31_32"><span class="itemName level1">Nutrition</span></a></li>
                   <li class="parent item38"><a href="http://store.averagejoe2pro.com/index.php?cPath=31_38"><span class="itemName level1">Coaching Software</span></a></li>
                   [b]<li class="parent item40"><a href="http://store.averagejoe2pro.com/index.php?cPath=31_40"><span class="itemParentName level1">Fluid and Fuel</span></a>[/b]
                   <li class="parent item39"><a href="http://store.averagejoe2pro.com/index.php?cPath=31_39"><span class="itemName level1">Indoor Trainers</span></a></li>
               </ul>
           </li>
           <li class="parent item30"><a href="http://store.averagejoe2pro.com/index.php?cPath=30"><img src="/images/stories/30.png" align="left" alt="img_30" /><span class="itemName level0">The Lab</span></a></li>
           <li class="parent item1"><a href="http://store.averagejoe2pro.com/index.php?cPath=1"><img src="/images/stories/1.png" align="left" alt="img_1" /><span class="itemName level0">Build Your Bike</span></a></li>
           <li class="parent item3"><a href="http://store.averagejoe2pro.com/index.php?cPath=3"><img src="/images/stories/3.png" align="left" alt="img_3" /><span class="itemName level0">What To Wear</span></a></li>
       </ul>
   </div>
</div>

 

As you can see, the bolded <li> item does not have a closing tag.

<li class="parent item40"><a href="http://store.averagejoe2pro.com/index.php?cPath=31_40"><span class="itemParentName level1">Fluid and Fuel</span></a>

 

Here is an example from the site I'm working on (http://www.buddhateas.com/store/index.php?cPath=3_10):

<div id="categoryBoxContainer" class="ui-widget infoBoxContainer">
<div class="ui-widget-header infoBoxHeading">Categories</div>
   	<div class="ui-widget-content infoBoxContents">
       	<ul class="menu">
           	<li class="item1"><a href="http://www.buddhateas.com/store/index.php?cPath=1"><span class="itemName">Hardware</span></a><span class="countSeperator"> » </span><span class="showCounts">[6]</span></li>
               <li class="item2"><a href="http://www.buddhateas.com/store/index.php?cPath=2"><span class="itemName">Software</span></a><span class="countSeperator"> » </span><span class="showCounts">[4]</span></li>
               <li id="current" class=" active item3"><a href="http://www.buddhateas.com/store/index.php?cPath=3"><span class="itemParentName">DVD Movies</span></a><span class="countSeperator"> » </span><span class="showCounts">[17]</span>
               <ul class="level 1">
               		[b]<li class="item10"><a href="http://www.buddhateas.com/store/index.php?cPath=3_10"><span class="itemParentName">Action</span></a><span class="countSeperator"> » </span><span class="showCounts">[9]</span>[/b]
                       <li class="item13"><a href="http://www.buddhateas.com/store/index.php?cPath=3_13"><span class="itemName">Cartoons</span></a><span class="countSeperator"> » </span><span class="showCounts">[1]</span></li>
                       <li class="item12"><a href="http://www.buddhateas.com/store/index.php?cPath=3_12"><span class="itemName">Comedy</span></a><span class="countSeperator"> » </span><span class="showCounts">[2]</span></li>
                       <li class="item15"><a href="http://www.buddhateas.com/store/index.php?cPath=3_15"><span class="itemName">Drama</span></a><span class="countSeperator"> » </span><span class="showCounts">[3]</span></li>
                       <li class="item11"><a href="http://www.buddhateas.com/store/index.php?cPath=3_11"><span class="itemName">Science Fiction</span></a><span class="countSeperator"> » </span><span class="showCounts">[1]</span></li>
                       <li class="item14"><a href="http://www.buddhateas.com/store/index.php?cPath=3_14"><span class="itemName">Thriller</span></a><span class="countSeperator"> » </span><span class="showCounts">[1]</span></li>
                    </ul>
                </li>
            <li class="item21"><a href="http://www.buddhateas.com/store/index.php?cPath=21"><span class="itemName">Gadgets</span></a><span class="countSeperator"> » </span><span class="showCounts">[1]</span></li>
        </ul>
    </div>
</div>

 

Again, the bolded line does not have a closing </li> tag.

<li class="item10"><a href="http://www.buddhateas.com/store/index.php?cPath=3_10"><span class="itemParentName">Action</span></a><span class="countSeperator"> » </span><span class="showCounts">[9]</span>

 

Not having a closing tag to start a new nested <ul> is fine, so long as the original <li> is closed. This is not the case in these errors.

 

Any suggestions?

 

Thanks!

Edited March 7, 2011 by birdrockdesigns

[birdrockdesigns 1]

Anyone?