Validating XHTML

[beaux1]

Okay, this is the portion of my code relevant.

 

	<div id="menu">
<ul class="ul">
	<li class="menu.li"><a href="http://www.beau.ws">
	<div class="home">
		<br />
		<span class="menufont">home</span></div>
	</a></li>
	<li class="menu.li"><a href="http://www.beau.ws/portfolio">
	<div class="portfolio">
		<br />
		<span class="menufont">portfolio</span></div>
	</a></li>
	<li class="menu.li"><a href="http://www.beau.ws/downloads">
	<div class="downloads">
		<br />
		<span class="menufont">downloads</span></div>
	</a></li>
	<li class="menu.li"><a href="http://www.beau.ws/about">
	<div class="about">
		<br />
		<span class="menufont">about</span></div>
	</a></li>
	<li class="menu.li"><a href="http://www.beau.ws/contact">
	<div class="contact">
		<br />
		<span class="menufont">contact</span></div>
	</a></li></ul>
</div>

 

And this is the XHTML Validator:

# Error  Line 24 column 19: document type does not allow element "div" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag.

 

<div class="home">

 

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

 

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

 

Now, I'm not sure what I'm doing wrong here, I'm using the <a> to link the bg image of the div by the way, so I can't remove that/change that around without it messing up.

 

Anyone shed any light on this?

 

Thanks.

[wildteen88]

You have an opening div after the opening anchor tag however you don't close the div.

 

One of XHTML requirements is that all tags have closing matching tags. With the code you supplied some of your divs do not have closing tag!.

[beaux1]

Nah, my divs are all closed.

[wildteen88]

Undercloser inspection you are right your divs are closed. I didn't see them at first.

 

However what I think the problem is that divs (or any other block level elements) is not allowed within the list tags (<li>)

 

Remove the divs and your html will validate.

 

What are you trying to do? a CSS based menu?

 

Cant you apply each list tags there own unique class rather than having the same class? That will eliminate the need for the div tags. You might want to rethink how you code your CSS menu.

 

When I get stuck with CSS menu's I always go to for help/inspiration.

[Copyright]

From what I know in XHTML 1.0 Strict and XHTML 1.1 you're not allowed to have block level elements inside inline elements, so you'll have to remove that <div> inside the <a> element if you want your site to pass validation.

 

 

Lster.

[mainewoods]

Copyright is right, you're not allowed to have block items inside inline items.  I'm not sure what you are trying to achieve, but you might be able to do it by removing the div and changing the link to a block item:

<li class="menu.li"><a href="http://www.beau.ws" style="display:block;" class="home">
    <br /><span class="menufont">home</span></a>
</li>

--notice that I added a style="display:block;" tag to the link and moved the class="home" to the link as well.