<li> error message in W3C validator [Archive]

Inga.

12-12-2008, 09:00 AM

I made my first site that was all layers with css rather than using tables here and there finally. Everything looks just fine but the W3C validation tool says I have done something wrong with my menu using the <li> tag. I'm not really sure what I've done wrong and don't quite understand the validation error message.

I get this message:
Line 25, Column 7: document type does not allow element "li" here; missing one of "ul", "ol", "menu", "dir" start-tag.
<li>Start</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>").

The code for the menu is:
<div id="nav01"> 
<li><a href="../index.html">Start</a></li>
|
<li><a href="../valkommen.html">Välkommen</a></li>
|
<li><a href="../tuina.html">Vad är Tui Na?</a></li>
|
<li><a href="../meridianer.html">Meridianer</a></li>
|
<li><a href="../behandling.html">Behandling</a></li>
|
<li><a href="../varfinnsjag.html">Var finns jag?</a></li>
</div>

And my css for it is:
.twoColHybLtHdr #nav01 {
text-align:center;
color: #6d6e71;
font-weight:500;
vertical-align:top;
padding: 0 0;
}
.twoColHybLtHdr #nav01 li {
list-style: none;
display: inline;
color: #817c00;
font-weight:500;
}
.twoColHybLtHdr #nav01 a {
text-decoration: none;
color: #6d6e71;
}
.twoColHybLtHdr #nav01 a:hover {
text-decoration: underline;
}

Inga.

12-12-2008, 10:21 AM

Thank you for the quick reply. I have a followup issue now, though.

As soon as I added the <ul> tag, the nav01 div moved down the page a bit below the banner div instead of snapping together and threw off the layout. I've been looking at a sample of what I used as my example for doing this (forgot the ul tag though) and now I don't see any differences except that my div travels down the page as soon as I add the ul tag. I feel I must have made another rather silly error somewhere that I just can't see... Here is the code if anyone has an idea of what I have done wrong:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>title</title>

<link href="../css/bastadkliniken.css" rel="stylesheet" type="text/css" />


</head>

<body class="twoColHybLtHdr">
<div id="container">
<div id="banner"><img src="../images/logo_white.jpg" alt="Välkommen till Båstad Kliniken" width="328" height="106" /></div>

<div id="nav01">
<ul>
<li><a href="../index.html">Start</a> |</li>
<li><a href="../valkommen.html">Välkommen</a> |</li>
<li><a href="../tuina.html">Vad är Tui Na?</a> |</li>
<li><a href="../meridianer.html">Meridianer</a> |</li>
<li><a href="../behandling.html">Behandling</a> |</li>
<li><a href="../varfinnsjag.html">Var finns jag?</a> |</li>
</ul>

</div>

<div id="sidebar1">

<img src="../images/page2.jpg" width="335" height="284" />

</div>

<div id="maincontent">
<h1>Header</h1>
<p>text</p>

</div>
<br class="clearfloat" />
<div id="footer">
<p>footer</p>
</div>

</div>
</body>
</html>

and the css I used:
BODY {
MARGIN: 0;
background-color:#fff;
text-align: center; font: 11px Verdana, Geneva, sans-serif;
color: #6d6e71;
}
.twoColHybLtHdr #container {
width: 870px;
margin: 0 auto;
text-align: left;
}
.twoColHybLtHdr #banner {
width: auto;
margin: 80px 0 0 0;
padding: 0 0 30px 0;
text-align:center;
}
.twoColHybLtHdr #nav01 {
text-align:center;
color: #6d6e71;
font-weight:500;
vertical-align:top;
padding: 0 0;
}
.twoColHybLtHdr #nav01 li {
list-style: none;
display: inline;
color: #817c00;
font-weight:500;
}
.twoColHybLtHdr #nav01 a {
text-decoration: none;
color: #6d6e71;
}
.twoColHybLtHdr #nav01 a:hover {
text-decoration: underline;
}
.twoColHybLtHdr #sidebar1 {
float: left;
width: 335px;
padding: 0px 0;
margin: 80px 0 0 50px;
text-align:left;
vertical-align:top;
}
.twoColHybLtHdr #maincontent {
width: 400px;
margin: 80px 45px 0 420px;
padding: 0;
text-align:left;
vertical-align:top;
}
.twoColHybLtHdr #maincontent h1 {
color:#817c00;
font-weight:bold;
font-size: 12px;
}
.twoColHybLtHdr #maincontent h4 {
color:#817c00;
font-weight:300;
font-size: 11px;
}
.twoColHybLtHdr #maincontent a {
color:#817c00;
text-decoration: none;
}
.twoColHybLtHdr #maincontent a:hover {
color:#817c00;
text-decoration: underline;
}
.twoColHybLtHdr #startpage {
width: 450px;
margin: 80px 45px 0 215px;
padding: 0;
text-align:left;
vertical-align:top;
}
.twoColHybLtHdr #footer {
margin: 100px 0 0 0;
padding: 0 0;
background-image:url(../images/footer_white.jpg);
height: 56px;
/* text-align:center;
vertical-align:middle;
color:#fff;*/
}
.twoColHybLtHdr #footer p {
margin: 0;
text-align:center;
color:#fff;
font-weight:500;
vertical-align:middle;
padding: 20px 0 0 0;
}
.twoColHybLtHdr #footer a {
text-decoration: none;
color: #fff;
font-weight:500;
}
.twoColHybLtHdr #footer a:hover {
text-decoration: underline;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
SPAN {
COLOR: #6d6e71;
font-weight:500;
font-size:11px;
FONT-FAMILY: verdana, sans-serif
}
img {
margin: 0 0 0 0;
border-style: none;