The problem with nested lists

While working on a project for a multi-national company who are pretty strict on their web accessibility compliance, I stumbled across a problem regarding nested lists. For as long as I can recall, it’s been fine to nest a <ul> tag within a <ul> tag to produce sub navigation or secondary intented lists thus:

<ul>
<li>list item one</li>
<li>list item two</li>
<ul>
<li>sub item one</li>
<li>sub item two</li>
</ul>
<li>list item three</li>
</ul>

However, try as I might I couldn’t get the thing to validate under XHTML 1.0. In the end I had to abandon the second level <ul> and use a css class to do the same thing. The result looks more like this:

<ul>
<li>list item one</li>
<li>list item two</li>
<li class="sub">sub item one</li>
<li class="sub">sub item two</li>
<li>list item three</li>
</ul>

No worries mate!

 

 

One Response to The problem with nested lists

  1. Alex says:

    26/10/07 at 10:03 am

    The problem is that the XHTML you’ve produced for the sub navigation is incorrect. The second ul needs to be wrapped in the parent li, so it should look like the following,

    list item one
    list item two

    sub item one
    sub item two

    list item three

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Tuesday, December 5th

Tags: , ,

Cats: css, design, web

Get yourself connected

Follow @tjcreative on Twitter

Subscribe to the blog RSS feed

Related posts

No related posts.

 

Writing

Do Want ~ Pantone Colour Chairs (0) 07/09/2010

Building My Fixie Pt.2 ~ Stripping (0) 23/08/2010

Even more beautiful Last.fm listening stat graphs (2) 23/08/2010

New CSS Reset Framework ~ Toucan CSS Reset (0) 22/08/2010

Styling the current_page_item tag for child pages in WordPress (0) 05/08/2010

New Work ~ Swinton Insurance Deal website (0) 27/07/2010

New Work ~ Bournemouth Air Festival website (0) 16/03/2010

New Work ~ YATA Sports website (0) 27/01/2010

Being

I'm a Bournemouth-based Freelance Graphic and Web Designer with six years industry and more than eleven years personal experience in all aspects of digital design and new media.

 

I have a broad range of experience covering web design (custom cms theme design for Joomla, Wordpress & Drupal), design for print (letterheads, business cards, logos etc) and new media (banner ads, flash animation, interactive info portals). I believe that a design is only as good as it is usable, and prioritise the latest accessibility standards in all my online work.

 

Toby James Pestridge

Toby James Creative

14 Twyford Close

Bournemouth, Dorset, BH8 0PQ UK

01202 565595


Download hCard

Tweeting

 

© 2010 Toby James Creative All Rights Reserved | Powered by Wordpress, built by me

 

Find us on the FreeIndex directory under Web Design Resources | Design Directory UK | Business Directory - Directory of UK companies and businesses, arranged by category.