ul terminated prematurely Options

[jerbil]

I am using some canned code that replaces bullets on line items in unordered lists with favicons with the rest of the item being an <a href> external link (from where the favicon was retrieved).

It worked great, apart from the fact that it appears to only process one iteration of the ul class. That wasn't a problem as I just had one long list of line items (external links) interspersed with text and other tags and that worked fine. However, in order to tidy it up, I grouped items in the list and wanted to jump to the appropriate group from an initial category list.

I used <a href> and <a name> combinations in order to accomplish that as that was the only method I knew. However, the <a name> tags are terminating the <ul> prematurely. Is there an alternative to <a href> <a name> combinations to enable me to branch within the document so that the <ul> is not terminated? I don't understand why <a name> tags terminate it but <a href> tags (the external links within the <li>'s) are fine.

The unordered list ceases to become an unordered list immediately, with the first <a name=...> as the combination of code
var ul = document.getElementsByTagName("ul");
and
var links = ul[i].getElementsByTagName("a");
fails to find anything, whereas without the <a name=...> tags it processes all the list items.
I am assuming this is the case because, if I remove the first <a name=...> tag it works until it encounters the second one and, previously, with no <a name=...> tags it processed all the <li>'s (all 75 of them) down to the </ul>.

<p><a href="#Accommodation">Accommodation</a></p>
<p><a href="#Entertainment">Entertainment</a></p>
.
.
.
.
<ul class="favilist">
<!---------- ---------->
<a name="Accommodation"><p class="h2replace">Accommodation</p></a>
<!---------- ---------->
<P align="justify">
Want a great vacation in an apartment on a sandy Black Sea beach? Want to team it with some time in a traditional house in a quiet Bulgarian village? Try Chaika Holiday Apartment...
<li><a href="http://www.beachfront-apartment.co.uk">Chaika Beach Apartment</a></li>
</p>
<!---------- ---------->
<P align="justify">
Looking for somewhere special to stay? The Green House is a very nice Bed & Breakfast get-away, near Burgas
<li><a href="http://www.greenhouse-bg.com/en/" target="new">The Green House</a></li>
</p>
<!---------- ---------->
<P align="center"><a href="#start"><img src="http://dobrina.bravehost.com/myPictures/linkseparator.jpg" border="0" width="101" height="4"></a></p>
<!---------- ---------->
<a name="Entertainment"><p class="h2replace">Entertainment</p></a>
<!---------- ---------->
<P align="justify">
Want to get satellite TV? Bulsatcom covers most of Bulgaria. They also have internet service using the same dish, although this isn't necessarily available in all areas yet.
<li><a href="http://www.bulsat.com" target="new">Bulsatcom</a></li>
</p>
<!---------- ---------->
.
.
.
.
</ul>

[pandy]

You can't have A directly inside UL. UL can only directly contain LI. Everything else must be in a LI.
http://htmlhelp.com/reference/html40/lists/ul.html

[jerbil]

Thanks for the response.

However, I can understand
"You can't have A directly inside UL. "
but not
"UL can only directly contain LI. Everything else must be in a LI."
as, looking at the code that I have posted, that doesn't explain why the <p>'s work ok and the <img src=>'s work ok (prior to me adding the <a href>'s to take it back to top). In fact, the <li>'s are contained within <p>'s within the <ul> and they work fine. Perhaps I have just been lucky.

Any alternative method for branching into the <ul> without terminating it?

[pandy]

Define work. Have you tried to access them with JavaScript the same way as with the A? Maybe it works, maybe it doesn't. But theoretically, if your browser considers the UL to be closed when it encounter the A tag, the Ps no longer is on the lose in the UL, they are after the UL.

There is no way to know how browsers handle error recovery. Well, there probably is, but it isn't a transparent process and it varies wildly between browsers.

It doesn't matter. CSS and JS are layers on top of HTML. If the HTML is broken it's no surprise the rest doesn't work as expected. How could it?

[jerbil]

Define work?

Perhaps I should have said "worked" (even though they still "work") ok prior to adding the <a name> tags.

Err... everything "worked" great. The layout was as expected, the favicons replaced the bullets, the external links all "worked". Now, having removed the <a name> tags, it is "work"ing great again, the layout is as expected, the favicons replace the bullets, the links all "work". Not only that, the <a href>'s on the separators (that I have not removed) all "work" and onclick take you back to the appropriate place.

So, that is <p>, <img> and <a href> tags all "work"ing within <ul> and yet they are not contained within <li></li>.

The proof of whether they are "work"ing or not is in the two lines of code that I put at the start of the posted code
var ul = document.getElementsByTagName("ul");
and
var links = ul[i].getElementsByTagName("a");
which pick up all the list items.

As I said, "perhaps I have just been lucky".

Any alternative method for branching into the <ul> without terminating it?

[pandy]

Put the A in a LI.

[jerbil]

No, that doesn’t work.

As soon as it hits the <a name> tag, whether it is within its own <li> or part of an existing <li> (that, as they all do, contains a <a href> tag) the list terminates or, to be precise, the function that analyses the unordered list items stops and the following <li>’s are not presented as unordered list items, only the <a href>'s they contain are presented, implying that the <a name> tag terminates the <ul>.

On a different tack...

This all started because I assumed that the canned code was only working for one iteration of the appropriate unordered list and that is why I made it one long list. However, having revisited it, I can only assume that I was doing something wrong originally as now, having broken up the list into several unordered lists of the same class (interspersed with the <a name> tags), everything is working fine.

Sorry to trouble you.

[pandy]

Maybe because of the other errors. If the A is correctly nested something else that isn't in a LI will break the list.

Use the validator (link at the top of the page) and clean your HTML up before you try to use JS on it.