Block element inside an inline element?

[Kurisu]

Is this not allowed?

<a href="Home.html"><ul><li>Home</li></ul></a>

Basically what I'm trying to do is make a list item a link, but the validator complains about it... what am I to do?

I'm trying to stay within XHTML 1.0 Strict.

[Kravvitz]

You've got the nesting backwards.

Try this:
<ul><li><a href="Home.html">Home</a></li></ul>

[Kurisu]

That fixes the errors, but now the visual of the result is undesired. In firefox the list button image is one one line while the link has moved down to the next..? Easy way to fix this?

[kiwibrit]

Check out your CSS, or the coding for your table. Or drop us a link so that we can see what is happening.

[Kurisu]

Here is an example of my woes:

http://one.xthost.info/Kurisu/Temp.html

Included on that page is the "non-working" CSS and explaination.

I've tried changing CSS left and right, but no luck with what I wish to achieve.

[the tree]

Why oh why have you got each item marked out as it's own list?!

[Taschen]

You still don't have the correct syntax

<p><ul><li><a href="Temp.html">C++</a></li></ul></p>
<p><a href="Temp.html"><ul><li>C</li></ul></a></p>
<p><a href="Temp.html"><ul><li>Java</li></ul></a></p>
<p><a href="Temp.html"><ul><li>Visual Basic</li></ul></a></p>

It should be

<ul>
<li><a href="Temp.html">C++</a></li>
</ul>


Think of p as being for a block of text (ie a paragraph) inside of which a link can be placed but not a header. The equivalent of p for lists is ul or ol inside of which the elements of the list must then be described.

[Kurisu]

<ul>
<li><a href="Temp.html">C++</a></li>
</ul>

Okie, but it still doesn't format as I would like. (the full background highlight like the other "invalid" links)

Why oh why have you got each item marked out as it's own list?!
I originally had the entire menu one list:


<ul>

<li><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
<li><a href="">Item 4</a></li>

</ul>


But no amount of CSS changes could achieve the look I wanted and I was left with no choice, but to include lists inside of links. Therefore each link had to contain its own list and as a result you see the hack job I did on it. I found it impossible to have a list item with a bullet followed by text to have a block like format because the bullet was forceably removed. I tried weird crap like creating a bullet image and trying to float it left followed by text and creating a <a> link, but that failed horribly.

So, uh how do I achieve the effect of the links in the list on the valid XHTML 1.0 strict version that you guys provided? Is this possible? A list with a blocked <a> link background effect? I mean no matter how much CSS changes the <a> background block effect can only be applied to the text and not the entire list item unless the list item is inside of the <a></a>!?

I certainly would be impressed if someone achieved the list effect as seen on all the other links (http://one.xthost.info/Kurisu/Temp.html) except the first with valid XHTML 1.0 Strict cause I'm outta ideas.

Anyways is it so wrong to keep invalid stuff that doesn't meet up to WC3 standards? It seems to work fine :D

[Kravvitz]

Check this menu out. (http://www.dynamicsitesolutions.com/css/example-menus/5/)

[Kurisu]

Oooh yeah yeah... that seems to be great Kravvitz... never thought about a background image being attached to the <li> tag.