PDA

View Full Version : Spry Menu Invalid Markup


MikeyRitz
12-05-2012, 08:00 PM
Hi all,

I have used the following code to display a spry menu on the website. It works lovely, but it is coming up as 'Invalid Markup' in dreamweaver.

<div>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="index.html">Home</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Brands</a>
<ul>
<li><a href="#"><a href="art_gallery_clothing.html">Art Gallery Clothing</a></li>
<li><a href="#"><a href="pretty_green_clothing.html">Pretty Green</a></li>
<li><a href="#"><a href="john_smedley.php">John Smedley</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">Fishtail Parkas</a>
<ul>
<li><a href="#"><a href="M48_fishtail_parka.html">M-1948 Fishtail Parka</a></li>
<li><a href="#"><a href="M51_fishtail_parka.html">M-1951 Fishtail Parka</a></li>
<li><a href="#"><a href="m1951 fishtail parka replica.html">Classic M51 Mod Parka</a></li>
<li><a href="#"><a href="M65_fishtail_parka.html">M-1965 Fishtail Parka</a></li>
<li><a href="#"><a href="xs_m65_fishtail_parka.html">XS Fishtail Parka</a></li>
<li><a href="#"><a href="womens_parka.html">Womens Fishtail Parka</a></li>
<li><a href="#"><a href="the_who_parka.html">The Who Parka</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">Jackets</a>
<ul>
<li><a href="#"><a href="harrington_jacket.html">Harrington Jackets</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">Shirts</a>
<ul>
<li><a href="#"><a href="John_Lennon_Military_Shirt.html">John Lennon Army Shirts</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">T-Shirts</a>
<ul>
<li><a href="#"><a href="mod_t-shirts.html">Mod T-Shirts</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">Accessories</a>
<ul>
<li><a href="#"><a href="M65_wolf_fur_hood.html">Wolf Fur Hoods</a></li>
<li><a href="#"><a href="mod_footstools.php">Footstools</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">Mod News &amp; Reading</a>
<ul>
<li><a href="#"><a href="http://www.itsamodthing.com/blog">Blog</a></li>
<li><a href="#"><a href="mod_books.html">Mod Books</a></li>
<li><a href="#"><a href="mod_clothing.html">Mod Clothing</a></li>
<li><a href="#"><a href="ahistoryofmod.html">Mod History</a></li>
<li><a href="#"><a href="mod_images.html">Mod Images</a></li>
<li><a href="#"><a href="fishtail parkas & the korean_war.html">Origin Of The Fishtail Parka</a></li>
</ul>
<li><a class="MenuBarItemSubmenu" href="#">+44 (0)1743 790032</a>
</li>
</li>
</ul>
</div>

I'm also getting around 46 error message from W3.org as follows:


http://validator.w3.org/images/info_icons/error.png Line 40, Column 61: document type does not allow element "a" here; missing one of "object", "span", "bdo", "applet", "iframe", "tt", "i", "b", "u", "s", "strike", "big", "small", "font", "em", "strong", "dfn", "code", "q", "samp", "kbd", "var", "cite", "abbr", "acronym", "sub", "sup", "label", "ins", "del" start-tag <li><a href="#"><a href="pretty_green_clothing.html">Pretty Green</a></li> ✉ (http://validator.w3.org/feedback.html?uri=http%3A%2F%2Fitsamodthing.com%2F ;errmsg_id=65#errormsg)
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>").

Any help would be most appreciated.

Thanks

Mike

Corrosive
12-06-2012, 07:45 AM
You've probably just got a tag missing somewhere. Try 'tabbing' your code to make sure every element is opened and closed somewhere in the menu code :)

MikeyRitz
12-09-2012, 01:05 PM
Thanks Corrosive for your reply.

Example of one line with error code:

<li><a href="#"><a href="M65_wolf_fur_hood.html">Wolf Fur Hoods</a></li>

This part of the above code appears to be the tag containing the error on each line:
<a href="M65_wolf_fur_hood.html">

Dreamweaver states 'Invalid Markup' Marked invalid because it doesn't belong in the tag its in.

I think the may be something to do with the fact that there are two href elements:

<li><a href="#"><a href="M65_wolf_fur_hood.html">

Problem is the code works fine and if I remove the <a href="#"> tag then the spry drop down menu does not change colour when hovering over a link.

Any one with any advice would be most appreciated. Thanks

domedia
12-12-2012, 07:22 PM
tag its in.

I think the may be something to do with the fact that there are two href elements:

<li><a href="#"><a href="M65_wolf_fur_hood.html">


Yes, and somewhere else I saw two closing LI's </li></li> which is also not possible.

This is the most basic HTML there is, to make sure your elements are used right. Everything else comes after this.

domedia
12-12-2012, 07:24 PM
This is structure is broken as well:
</ul>
<li><a class="MenuBarItemSubmenu" href="#">+44 (0)1743 790032</a>

An opening LI tag can never come after a closing UL element.

MikeyRitz
12-13-2012, 10:27 PM
Thanks Domedia. Apologies for being a numpty. I've cleaned all the code up properly now and fully compliant with w3.org :) Thanks again.