The final Validation that evades me

Problem with nested divs and lists

[slinky]

I've almost finished validating my home page and header and I'm stuck with the last few errors, all related to the dropdown that was created. This is all!

While the code as is works just fine in my browser but it simply will not validate. I'm wondering if anyone can point me in the right direction to fixing the problem - nexted div tags within an ordered list. I'd greatly appreciate finally fixing it all and validating perfectly. :) In looking at the way it was constructed, it is as follows:

<ul>
<li><a onclick="MM_goToURL('parent','http://www.mysite.com/directory1/');return document.MM_returnValue"></a>

<ul>
<div style="background:url(http://www.mysite.com/img/men_top.png) no-repeat; width:220px; height:7px;"></div>
<li><a href="http://www.mysite.com/forums/"><strong>The Forums</strong></a></li>
<li><a href="http://www.mysite.com/review/"><strong>Review</strong></a></li>
<div style="clear:both;"></div>
<div style="background:url(http://www.mysite.com/img/men_bottom.png) no-repeat; width:220px; height:7px;"></div>
</ul>

</li>
</ul>

So the DIV tags apparently cannot be put in between list elements like unordered list. The validation errors would be unimportant but how do I get this menu to work properly and still have validation? I'm guessing the divs have to go...

Here are the 3 validation errors:

end tag for X omitted, but OMITTAG NO was specified

document type does not allow element X here; assuming missing Y start-tag

document type does not allow element X here; missing one of Y start-tag

[edited by: SuzyUK at 8:02 am (utc) on April 30, 2009]
[edit reason] No URLs per charter thanks [/edit]

[SuzyUK]

Hi Slinky and Welcome to WebmasterWorld! [webmasterworld.com]

I'm guessing the divs have to go...

You would be guessing correctly ;)

UL & OL can only contain li elements, LI elements can however contain block level elements

so you could simply substitute the divs for more li's, and style the first and last li elements as per the divs, that should validate, but is not Good Practice as those divs are purely presentational (adding rounded corners graphics?)

not sure that the clear both div is necessary in there at all if the inner li's are floated then simply making the last li/div the same or add width 100% should make it clear naturally

The 'nice' way to have rounded corners on variable length lists is to give the first and last items in your menus classnames and to apply the images directly to the first/last list items (they can then get the extra padding they require to make enough room for the image top or bottom) - Well this is at least until we are able to apply two background images to one element at which time you would simply apply them both the UL itself

[slinky]

Thanks Suzy - I've been here before but can't find my username, lol. But I'm happy to be here again under my new identity.

Wow... thanks. I thought I had to go that route but it didn't work first time through. Apparently all I had to do was just create additional list items that were blank using the style as the divs and.... it works!

Only two errors to squash and it's the last easy menu item. That should be no problem. :) Many thanks!