PDA

View Full Version : *Problem Solved* - Validation Error "document type does not allow element"



CSSisthebest
Mar 10th, 2008, 09:57 PM
Hi Everyone,

Just got a small validation error that i dont quite understand. wondering if anyone could help ?


Line 91, Column 30: document type does not allow element "li" here; missing one of "ul", "ol", "menu", "dir" start-tag

<li class="georgegoughpicture"></li>

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>").

thanking you in advance

James :thumbsup:

_Aerospace_Eng_
Mar 10th, 2008, 09:59 PM
We need to see the rest of your code. If you read the part in bold, it tells you exactly what the problem is. Is your li element inside any of the allowed listed elements? If not the then there is your problem.

CSSisthebest
Mar 10th, 2008, 10:08 PM
i dont think it is inside any of those elements, but here is my code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Switch Skateshop - News & Events</title>
<meta name="revised" content="Technolane, 29/02/08" /><!--Tells You When The Website Was Last Edited -->
<meta name="author" content="Technolane" /><!--This Is The Author And Title -->
<meta name="ROBOTS" content="ALL" /><!--Searchbots To Search Through All Content On The Page/Site -->
<meta http-equiv="content-type"
content="text/html;charset=utf-8" /><!--Code The Site Is Written In And What Charset -->
<meta http-equiv="Content-Style-Type" content="text/css" /><!-- Meta Tag Telling Search Engine That CSS Code Is Used -->
<meta name="keywords" content="skateshop, skateboard, skateboarding, essex, leigh on sea, switch, skatestore, online store, online shop, jamie moneypenny, mark longman, bomber, unit 3, elm road, core skateboard shop" /><!-- Keywords To Tell The Search Engine What The Site Is About -->
<meta name="description" content="Switch skates is the Brainchild of Mark Longman and Jamie 'Bomber' Wilson who teamed up with Adam Gill (Vans Visual Merchandiser) to create
the first core Skateboard shop in Leigh on Sea in the UK." /><!-- A Brief Description To Tell The Search Engine What The Site Is About -->
<!--This Preloads any images in the webiste-->
<script type="javascript">
if (document.images)
{img1 = new Image();
img1.src = "buttons.png";

img2 = new Image();
img2.src = "switchskateshopbanner.gif";

img3 = new Image();
img3.src = "leftborderfirstbox.png";

img4 = new Image();
img4.src = "switchlogomainbox.gif";

img5 = new Image();
img5.src = "wholefirstbox.jpg";

img8 = new Image();
img8.src = "topbordersecondbox.png";

img9 = new Image();
img9.src = "borderrightsecondbox.png";

img10 = new Image();
img10.src = "borderleftsecondbox.png";

img12 = new Image();
img12.src = "bottombordersecondbox.png";

img13 = new Image();
img13.src = "nikesblogo.gif";}
</script>

<script type="text/javascript" language="javascript">
function showDiv() {
document.getElementById("wrapper").style.display = "block";
}
</script>
<!--loads .css style sheet into xhtml document-->
<link rel="StyleSheet" href="wholesitecsscontent.css" type="text/css" />
</head>
<body onload="showDiv();">
<!--Dark Grey Header that holds the phone number and email-->
<div id="headerbartop"><div id="topheaderwrapper">
<h1>Email:<a href="mailto:[email protected]" class="headerfontcolour">[email protected]</a></h1><p class="headertext">Telephone: 01702 716866</p></div>
</div>
<!-- 2px black line under dark grey header -->
<div id="black2pxline"></div>
<!-- 1px light grey line under black 2px line -->
<div id="LGrey1pxline"></div>
<!-- 2px white line under light grey line -->
<div id="nearlywhiteline"></div>
<!--Wrapper To Hold Website -->
<div id="wrapper">
<!-- navigation buttons-->
<div id="navigationbuttons">
<!--Main Text Font-->
<div id="navigation">
<!--Navigation Links -->
<ul><li><a href="index.html" class="homebutton">Main Page</a></li>
<li><a href="teamriders.html" class="teambutton">Team Riders</a></li>
<li><a href="newsandevents.html" class="newsandevents">News & Events</a></li>
<li><a href="footage.html" class="footage">Footage</a></li>
<li><a href="onlinestore.html" class="onlinestore">Online Store</a></li>
<li><a href="contactus.html" class="onlinestore">Contact Us</a></li>
</ul>
</div>
</div>
<!--the first box-->
<div id="bannerimage"></div>
<!--images that make up the second box-->
<ul><li class="topbordersecondbox"></li></ul>
<ul><li class="leftbordersecondbox3"></li>
<li class="blackboxsecondbox">
<!--team riders-->
<li class="craigcoombspicture"></li>
<li class="georgegoughpicture"></li>
<li class="jaytatepicture"></li>
<li class="lukefoxwellpicture"></li>
<!--right border for second box-->
<li class="rightbordersecondbox3"></li></li></ul>
<!--left border for second box-->
<ul><li class="bottombordersecondbox"></li></ul>
<!--footer bar-->
<ul><li class="LGrey1pxline"></li></ul>
</div>
<div id="headerbarbottom">
<div id="LGrey1pxline2"></div>
<div id="black2pxline2"></div>
<!-- website link-->
<div id="headerbarbottom2"><div id="footerwrapper"><h3>Created and designed by <a href="http://www.technolane.co.uk/" class="footerfontcolour" target="_blank">Technolane</a> &copy; 2008.</h3></div>
</div>
</div>
</body>
</html>

_Aerospace_Eng_
Mar 10th, 2008, 10:13 PM
Thats the problem, it NEEDS to be inside one of those elements. You have it currently directly in an li. This is what you have

<ul><li class="leftbordersecondbox3"></li>
<li class="blackboxsecondbox">
<!--team riders-->
<li class="craigcoombspicture"></li>
<li class="georgegoughpicture"></li>
<li class="jaytatepicture"></li>
<li class="lukefoxwellpicture"></li>
<!--right border for second box-->
<li class="rightbordersecondbox3"></li></li></ul>
It should be something like this

<ul><li class="leftbordersecondbox3"></li>
<li class="blackboxsecondbox">
<!--team riders-->
<ul>
<li class="craigcoombspicture"></li>
<li class="georgegoughpicture"></li>
<li class="jaytatepicture"></li>
<li class="lukefoxwellpicture"></li>
<!--right border for second box-->
<li class="rightbordersecondbox3"></li></ul></li></ul>

VIPStephan
Mar 10th, 2008, 10:15 PM
I suppose the error lies here:



<ul>
<li class="leftbordersecondbox3"></li>
<li class="blackboxsecondbox">
<!--team riders-->
<li class="craigcoombspicture"></li>
<li class="georgegoughpicture"></li>
<li class="jaytatepicture"></li>
<li class="lukefoxwellpicture"></li>
<!--right border for second box-->
<li class="rightbordersecondbox3"></li>
</li>
</ul>

You can’t have lis inside lis, they must always be within uls. The validator also gives you the line number, and if you check “show source” before validating you can click the line number link and it will take you directly to the line where the error occurs.

CSSisthebest
Mar 10th, 2008, 10:17 PM
wicked, cheers mate worked perfect. :thumbsup:

jerry62704
Mar 11th, 2008, 03:49 PM
Can't tell which way you want to go do to the lack of indentation, but your ul/li combinations are unbalanced.

<ul><li class="leftbordersecondbox3"></li>
<li class="blackboxsecondbox">
LI started here, but ul not started for next LI under this one
<!--team riders-->
<li class="craigcoombspicture"></li>
<li class="georgegoughpicture"></li>
<li class="jaytatepicture"></li>
<li class="lukefoxwellpicture"></li>
<!--right border for second box-->
<li class="rightbordersecondbox3"></li></li></ul>

jerry62704
Mar 11th, 2008, 03:53 PM
Stephan:

I see you use pretty print (as I do) to format code so it is much easier to see. In this example, it sticks out like a sore thumb when you do that.

I understand that on the final page you might want to save the 1/100 of a second it takes to send the extra blank spaces, but do you think it is worth it?

Further, is there a way to run code into program XXXXXX and have it format the code? If so, where can I get XXXXXX?

VIPStephan
Mar 11th, 2008, 04:50 PM
Stephan:

I see you use pretty print (as I do) to format code so it is much easier to see. In this example, it sticks out like a sore thumb when you do that.
What do you mean by “sticks out like a sore thumb”?

I’m usually indenting nested elements by one tab, no matter whether or not they are allowed (for that moment only). It makes it a lot easier to read.


Further, is there a way to run code into program XXXXXX and have it format the code? If so, where can I get XXXXXX?

You can get the program at http://www.adobe.com/products/dreamweaver/ and it’s called Dreamweaver. I click “Apply Source Formatting” and it’s formatting the source code beautifully.

That toolbar might not be active by default so go to “View > Toolbars" and click “Coding”. You’ll get the toolbar in the code view and it’s the last icon to click (the one with the paint bucket icon and HTML brackets).

jerry62704
Mar 11th, 2008, 10:35 PM
<ul>
<li class="leftbordersecondbox3"></li>
<li class="blackboxsecondbox">
<!--team riders-->
<li class="craigcoombspicture"></li>
<li class="georgegoughpicture"></li>
<li class="jaytatepicture"></li>
<li class="lukefoxwellpicture"></li>
<!--right border for second box-->
<li class="rightbordersecondbox3"></li>
</li>


By "like a sore thumb" (and showing my age as it was a common saying way back when) the lack of the UL to start the new LI becomes readily obvious. In the following, it is much harder to see:


<ul><li class="leftbordersecondbox3"></li>
<li class="blackboxsecondbox">
<!--team riders-->
<li class="craigcoombspicture"></li>
<li class="georgegoughpicture"></li>
<li class="jaytatepicture"></li>
<li class="lukefoxwellpicture"></li>
<!--right border for second box-->
<li class="rightbordersecondbox3"></li></li></ul>

I have Dreamweaver, but the one time I tried that it flattened the code.:confused: Don't have it here so I can't test it now, but I will tonight.:thumbsup:

_Aerospace_Eng_
Mar 11th, 2008, 10:38 PM
This is the output of the invalid code in DW when using code formatting (1 tab = 4 spaces).

<ul>
<li class="leftbordersecondbox3"></li>
<li class="blackboxsecondbox">
<!--team riders-->
<li class="craigcoombspicture"></li>
<li class="georgegoughpicture"></li>
<li class="jaytatepicture"></li>
<li class="lukefoxwellpicture"></li>
<!--right border for second box-->
<li class="rightbordersecondbox3"></li>
</li>
</ul>
Here is the corrected code with the same formatting

<ul>
<li class="leftbordersecondbox3"></li>
<li class="blackboxsecondbox">
<!--team riders-->
<ul>
<li class="craigcoombspicture"></li>
<li class="georgegoughpicture"></li>
<li class="jaytatepicture"></li>
<li class="lukefoxwellpicture"></li>
<!--right border for second box-->
<li class="rightbordersecondbox3"></li>
</ul>
</li>
</ul>

jlhaslip
Mar 12th, 2008, 01:41 AM
If you have FF2, and the Html Tidy extension, it will do some nice stuff to format your code. Then select all , coy and paste into the original source code file. Works for me (when I remember to do it.)

jerry62704
Mar 12th, 2008, 03:31 PM
jlhaslip:

Is TIDY an add-on to FF? I don't see it in my Tools menu item. I do have Firebug and love it.

_Aerospace_Eng_
Mar 12th, 2008, 05:08 PM
Yes its an add-on.