[SOLVED] HTML Gurus help me validate this

DaveTheWave

Why the hell doesn't this validate under XHTML 1.0 Transitional?

<div id="navtop">
	<ul id="navlist">
		<span class="nav">
			[*][url="http://www.google.com"]link[/url]
			[*][url="http://www.google.com"]link[/url]
			[*][url="http://www.google.com"]link[/url]
			[*][url="http://www.google.com"]link[/url]
		</span>
	[/list]
</div>

This is so infuriating. I get the response from W3C:

Line 30 column 8: document type does not allow element "li" here.

I also get one regarding the SPAN class:

Line 29 column 21: document type does not allow element "span" here; assuming missing "li" start-tag.

Every google search suggests that the code is bad, but it's perfect I say! What the hell is wrong with it? I'm so close to being valid, I can taste it...

monkeypoo

I haven't exactly "looked this up", but my guess is that you're not officially allowed to have a span tag as a direct child of a ul tag. In fact, I'm not exactly sure why you have the span at all. Why don't you just use the ul for identification / styling? Of course, I realize that you might actually have a legitimate reason, but I can't think of one off the top of my head.

Try switching the order of the span and the ul.

Zifnab

I'm reasonably sure it's because a span is supposed to be an inline element, whereas its usage here is as a block-level element. In other words, you can have this:

<ul>
[*]<span>blahblah</span>

but you can't have this:

<ul>
<span>
[*]blahblah
</span>
[/list]

because <ul> and [*] are both block-level elements, and you can't put a block-level element into an inline element (in general).

That could be causing your problem. What are you trying to do? Can you just use the <ul> tag to perform the styling instead of having to create another container inside of it? If you must have a third container, put it in a div, maybe?

I blame any inaccuracies in this post on the fact that it's really late at night right now...

DaveTheWave

FUCK YEAH! VALIDATED!!! I just changed:

<ul id="navlist"> to

<ul id="navlist" class="nav">

and deleted the <span> altogether. Thanks to the magic of CSS it all works. Thank you H/A I love you.