Validation with Lists 3 Level's Down

I have a navigation system that I'm working on and just had a question about
lists
that go three levels down. It validates fine until I nest the
"subactiveList" unordered list. I basically need that third level to indent
and have a separate background color. From what I have below, is this still
considered valid markup? It doesn't validate at the W3C.

Here is my markup:

<ul id="navlist">
<li id="active"><a href="#" id="current">Banking</a>
<ul id="subnavlist">
<li id="subactive"><a href="#" id="subcurrent">Checking
Accounts</a></li>

<ul id="subactiveList">
<li><a href="#"> Compare Accounts</a> </li>
<li> <a href="#">Ultimate Checking</a> </li>
<li><a href="#"> Regular Checking </a></li>
<li><a href="#"> Money Market Checking </a></li>
<li><a href="#"> Direct Checking </a></li>
<li><a href="#"> Heritage Checking </a></li>
<li><a href="#"> Leisure Line Checking </a></li>
<li><a href="#"> Leisure Line Premium </a></li>
<li> <a href="#">Checking </a></li>
<li><a href="#"> Student Checking </a></li>
<li><a href="#"> Basic Checking </a></li>
<li><a href="#"> Debit Cards </a></li>
<li><a href="#"> Fees </a></li>
</ul>

<li><a href="#">Savings Accounts</a></li>
<li><a href="#">CDs</a></li>
<li><a href="#">Money Market Accounts</a></li>
<li><a href="#">Credit Cards</a></li>
</ul>

</li>
<li><a href="#">Loans </a></li>
<li class="bordernone"><a href="#">Investments</a></li>
</ul>

When you nest a list, you're not supposed to close the <li> of the "parent"
list element until after the end of the nested list.

In your code, you close the "Checking Accounts" parent list element, then do
your nested list, then start a new <li> in the parent list. Take the </li>
from the Checking Accounts list element and put it AFTER the </ul> of the
nested "subactive" list.

Note that your second-level list validates because you (quite properly)
didn't close the </li> from the Banking element until AFTER the close of the
nested list contained therein.

--
Sonjay


On 9/15/06 8:12 AM, "Justin J." wrote:

I have a navigation system that I'm working on and just had a question about
lists
that go three levels down. It validates fine until I nest the
"subactiveList" unordered list. I basically need that third level to indent
and have a separate background color. From what I have below, is this still
considered valid markup? It doesn't validate at the W3C.

Here is my markup:

ul id="navlist"
li id="active"><a href="#" id="current">Banking</a
ul id="subnavlist"
li id="subactive"><a href="#" id="subcurrent">Checking
Accounts</a></li

ul id="subactiveList"
li><a href="#"> Compare Accounts</a> </li
li> <a href="#">Ultimate Checking</a> </li
li><a href="#"> Regular Checking </a></li
li><a href="#"> Money Market Checking </a></li
li><a href="#"> Direct Checking </a></li
li><a href="#"> Heritage Checking </a></li
li><a href="#"> Leisure Line Checking </a></li
li><a href="#"> Leisure Line Premium </a></li
li> <a href="#">Checking </a></li
li><a href="#"> Student Checking </a></li
li><a href="#"> Basic Checking </a></li
li><a href="#"> Debit Cards </a></li
li><a href="#"> Fees </a></li
/ul

li><a href="#">Savings Accounts</a></li
li><a href="#">CDs</a></li
li><a href="#">Money Market Accounts</a></li
li><a href="#">Credit Cards</a></li
/ul

/li
li><a href="#">Loans </a></li
li class="bordernone"><a href="#">Investments</a></li
/ul

This -

<li id="subactive"><a href="#" id="subcurrent">Checking
Accounts</a></li>

<ul id="subactiveList">
...
<li><a href="#"> Fees </a></li>
</ul>


should be this -

<li id="subactive"><a href="#" id="subcurrent">Checking
Accounts</a>

<ul id="subactiveList">

...
<li><a href="#"> Fees </a></li>
</ul></li>


--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================


"Justin J." <smeagal (AT) test (DOT) com> wrote

I have a navigation system that I'm working on and just had a question
about lists
that go three levels down. It validates fine until I nest the
"subactiveList" unordered list. I basically need that third level to
indent
and have a separate background color. From what I have below, is this
still
considered valid markup? It doesn't validate at the W3C.

Here is my markup:

ul id="navlist"
li id="active"><a href="#" id="current">Banking</a
ul id="subnavlist"
li id="subactive"><a href="#" id="subcurrent">Checking
Accounts</a></li

ul id="subactiveList"
li><a href="#"> Compare Accounts</a> </li
li> <a href="#">Ultimate Checking</a> </li
li><a href="#"> Regular Checking </a></li
li><a href="#"> Money Market Checking </a></li
li><a href="#"> Direct Checking </a></li
li><a href="#"> Heritage Checking </a></li
li><a href="#"> Leisure Line Checking </a></li
li><a href="#"> Leisure Line Premium </a></li
li> <a href="#">Checking </a></li
li><a href="#"> Student Checking </a></li
li><a href="#"> Basic Checking </a></li
li><a href="#"> Debit Cards </a></li
li><a href="#"> Fees </a></li
/ul

li><a href="#">Savings Accounts</a></li
li><a href="#">CDs</a></li
li><a href="#">Money Market Accounts</a></li
li><a href="#">Credit Cards</a></li
/ul

/li
li><a href="#">Loans </a></li
li class="bordernone"><a href="#">Investments</a></li
/ul

Hello Sonjay and Murray,

I think I understand what you both suggested and implemented it, but it
still doesn't validate. Here is what I currently have:

<ul id="navlist">

<li id="active"><a href="#" id="current">Banking</a></li>

<ul id="subnavlist">
<li id="subactive"><a href="#" id="subcurrent">Checking Accounts</a>

<ul id="subactiveList">
<li><a href="#"> Compare Accounts</a> </li>
<li> <a href="#">Ultimate Checking</a> </li>
<li><a href="#"> Regular Checking </a></li>
<li><a href="#"> Money Market Checking </a></li>
<li><a href="#"> Direct Checking </a></li>
<li><a href="#"> Heritage Checking </a></li>
<li><a href="#"> Leisure Line Checking </a></li>
<li><a href="#"> Leisure Line Premium </a></li>
<li> <a href="#">Checking </a></li>
<li><a href="#"> Student Checking </a></li>
<li><a href="#"> Basic Checking </a></li>
<li><a href="#"> Debit Cards </a></li>
<li><a href="#"> Fees </a></li>
</ul>
</li>


<li><a href="#">Savings Accounts</a></li>
<li><a href="#">CDs</a></li>
<li><a href="#">Money Market Accounts</a></li>
<li><a href="#">Credit Cards</a></li>


</ul>


<li><a href="#">Loans </a></li>
<li class="bordernone"><a href="#">Investments</a></li>


</ul>

On Fri, 15 Sep 2006 08:12:04 -0400, "Justin J." <smeagal (AT) test (DOT) com>
wrote:

From what I have below, is this still
considered valid markup? It doesn't validate at the W3C.

Here is my markup:

ul id="navlist"
li id="active"><a href="#" id="current">Banking</a
ul id="subnavlist"
li id="subactive"><a href="#" id="subcurrent">Checking
Accounts</a></li

ul id="subactiveList"

No, that's not valid markup. The </li> tag just before your
subactiveList <ul> should come after the subactiveList's closing </ul>
tag.

<ul id="navlist">
<li id="active"><a href="#" id="current">Banking</a>
<ul id="subnavlist">
<li id="subactive"><a href="#" id="subcurrent">Checking
Accounts</a>
<ul id="subactiveList">
....
</ul>
</li>

Gary

Justin J. wrote:

Hello Sonjay and Murray,

I think I understand what you both suggested and implemented it, but it
still doesn't validate. Here is what I currently have:

Should be like this:

<ul id="navlist">
<li id="active"><a href="#" id="current">Banking</a>

<ul id="subnavlist">
<li id="subactive"><a href="#" id="subcurrent">Checking Accounts</a>
<ul id="subactiveList">
<li><a href="#"> Compare Accounts</a> </li>
<li> <a href="#">Ultimate Checking</a> </li>
<li><a href="#"> Regular Checking </a></li>
<li><a href="#"> Money Market Checking </a></li>
<li><a href="#"> Direct Checking </a></li>
<li><a href="#"> Heritage Checking </a></li>
<li><a href="#"> Leisure Line Checking </a></li>
<li><a href="#"> Leisure Line Premium </a></li>
<li> <a href="#">Checking </a></li>
<li><a href="#"> Student Checking </a></li>
<li><a href="#"> Basic Checking </a></li>
<li><a href="#"> Debit Cards </a></li>
<li><a href="#"> Fees </a></li>
</ul>
</li>
<li><a href="#">Savings Accounts</a></li>
<li><a href="#">CDs</a></li>
<li><a href="#">Money Market Accounts</a></li>
<li><a href="#">Credit Cards</a></li>
</ul></li>
<li><a href="#">Loans </a></li>
<li class="bordernone"><a href="#">Investments</a></li>
</ul>

Osgood,

That was it. It did validate. I see where you closed the <li>. Thank you
also Sonjay, Murray, and Gary for your quick input.

Warmest,

Justin J.


"Osgood" <notavailable (AT) atthisaddress (DOT) com> wrote

Justin J. wrote:

Hello Sonjay and Murray,

I think I understand what you both suggested and implemented it, but it
still doesn't validate. Here is what I currently have:


Should be like this:

ul id="navlist"
li id="active"><a href="#" id="current">Banking</a

ul id="subnavlist"
li id="subactive"><a href="#" id="subcurrent">Checking Accounts</a
ul id="subactiveList"
li><a href="#"> Compare Accounts</a> </li
li> <a href="#">Ultimate Checking</a> </li
li><a href="#"> Regular Checking </a></li
li><a href="#"> Money Market Checking </a></li
li><a href="#"> Direct Checking </a></li
li><a href="#"> Heritage Checking </a></li
li><a href="#"> Leisure Line Checking </a></li
li><a href="#"> Leisure Line Premium </a></li
li> <a href="#">Checking </a></li
li><a href="#"> Student Checking </a></li
li><a href="#"> Basic Checking </a></li
li><a href="#"> Debit Cards </a></li
li><a href="#"> Fees </a></li
/ul
/li
li><a href="#">Savings Accounts</a></li
li><a href="#">CDs</a></li
li><a href="#">Money Market Accounts</a></li
li><a href="#">Credit Cards</a></li
/ul></li
li><a href="#">Loans </a></li
li class="bordernone"><a href="#">Investments</a></li
/ul