Jump to content
Sign in to follow this  
birdrockdesigns

Help: Categories InfoBox to unsorted list menu and CSS

Recommended Posts

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 by birdrockdesigns

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×