List items inside a span are casuing me validation problems.

Hi every one I have a quick question. I'm building and interface this is make of unordered list items. Those list items are contained in a span so that interface can have separate look for the other links on the page.

But when I validate my page in Dreamweaver I get some page errors that.

Here is the error:

[COLOR="Red"]The tag:"span" is not allowed within: "ul" It is only allowed within: a, abbr, acronym, address, b, bdo, big, button, caption, cite, code, dd, del, dfn, div, dt, em, fieldset, h1, h2, h3, h4, h5, h6. . ..[XHTML 1.0 strict][/COLOR]

Now here is the code in question:
[HTML]
<ul id="nav">
<span class="left_links">
<li class="nav_items_00"><a href="index.html">Home</a></li>
<li class="nav_items_00"><a href="services.html">Services</a></li>
<li class="nav_items_00"><a href="gallery.html">Gallery</a></li>
<li class="nav_items_00"><a href="events.html">Events</a></li>
<li class="nav_items_00"><a href="http://hsgsphoto.wordpress.com/" target="_blank">Blog</a></li>
<li class="nav_items_00"><a href="about.html">About</a></li>
</span>
[/HTML]
The page that you can see this code in action is located at:

[url="http://www.hsgsphoto.com"]http://www.hsgsphoto.com[/url]

I guess my question is what would be the best practice in this situation. I need the a way to tell this group of links to act different then links in other parts of the page but the error I'm getting in validation is that list items (li) tags are not to be used within a span.

Thank you so much for any feed back and help

John

In the "ul" element, it is only the "li" element that are allowed to descend right next to it.

So, what you're doing is invalid and will never pass validation.

Go to your css and copy all your attributes from the nav_items_00 class and paste them into the left_links (delete the attributes that are duplicates). Then just write your code like this:

[HTML]
<ul id="nav">
<li class="left_links"><a href="index.html">Home</a></li>
<li class="left_links"><a href="services.html">Services</a></li>
<li class="left_links"><a href="gallery.html">Gallery</a></li>
<li class="left_links"><a href="events.html">Events</a></li>
<li class="left_links"><a href="http://hsgsphoto.wordpress.com/" target="_blank">Blog</a></li>
<li class="nav_items_00"><a href="about.html">About</a></li>
</ul>
[/HTML]

is that what you are looking for?

If I delete the attributes:



then how am I going to get the interface to work when people scroll over it? I'm not sure what your gunning for in your response?

you want to keep the ones that you have already in your left_links class. The deleting of attributes will only be done after you copy all the attributes over from your other class (nav_items_00). Only delete attributes if you have duplicates like they both have a color attribute, but you want to keep your left links one.

Made up Example:


.left_links a:link {
color: #c0c0c0;
text-decoration:none;
}

.nav_items_00 a:link {
color: #999999
text-decoration:none;
font-size: 10px;
}

*now COPY the nav_items attributes and paste into left_links (Don't cut, because you want to keep your other attributes where they are)

.left_links a:link {
color: #c0c0c0;
text-decoration:none;
color: #999999
text-decoration:none;
font-size: 10px;
}

.nav_items_00 a:link {
color: #999999
text-decoration:none;
font-size: 10px;
}


*Now delete the duplicates that you don't need

.left_links a:link {
color: #c0c0c0;
text-decoration:none;
font-size: 10px;
}

.nav_items_00 a:link {
color: #999999
text-decoration:none;
font-size: 10px;
}

That is what I was talking about doing. Maybe I didn't understand your question correctly, but this is what i believe my solution would be if I have the problem right.

Thx you I will give it a try and see how it turns out thx you for the extra clarification.

John

No prob. Hope it works out.