Menu
Hi. I have used validation tool to find and fix most of my index page few dozen errors.
There are however the following that I cannot fix without some help.
Firstly I should point out that my page is .shtml ,i.e. the index page is [url]http://www.minifigtimes.com/index.shtml
I have a css file, [url]http://www.minifigtimes.com/default.css
It contains the following DOCTYPE that I probably just lifted from somewhere (I dont know if this is right for my page, probably not..)
[code=php]<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
The errors I can’t fix are shown here: [B][url]http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.minifigtimes.com%2F
There are 7 errors but most are repetition I think, i.e. I think I have 4 errors.
Some are related to a Javascript I am using to display random images with an associated hyperlink.
Any help really appreciated. Thanks!
//<![CDATA[
....
// ]]>[code=html]<script type='text/javascript'>[/code][code=php]
//<![CDATA[
<script type='text/javascript'>
<!--
/*
Random Image Link Script- By JavaScript Kit(http://www.javascriptkit.com)
Over 200+ free JavaScripts here!
Updated: 00/04/25
*/
function random_imglink(){
var myimages=new Array()
//specify random images below. You can have as many as you wish
myimages[1]="http://www.brickshelf.com/gallery/legolandtimes3/archives/2008/archive-218.png"
myimages[2]="http://www.brickshelf.com/gallery/legolandtimes3/archives/2008/archive-217.png"
myimages[3]="http://www.brickshelf.com/gallery/legolandtimes3/archives/2008/archive-215.png"
myimages[4]="http://www.brickshelf.com/gallery/legolandtimes3/archives/2008/archive-213.png"
myimages[5]="http://www.brickshelf.com/gallery/legolandtimes3/archives/2008/archive-211.png"
myimages[6]="http://www.brickshelf.com/gallery/legolandtimes3/archives/2008/archive-210.png"
myimages[7]="http://www.brickshelf.com/gallery/legolandtimes3/archives/2008/archive-237.png"
myimages[8]="http://www.brickshelf.com/gallery/legolandtimes3/archives/2008/archive-249.png"
myimages[9]="http://www.brickshelf.com/gallery/legolandtimes3/archives/2008/archive-250.png"
myimages[10]="http://www.brickshelf.com/gallery/legolandtimes3/archives/2008/archive-255.png"
myimages[11]="http://www.brickshelf.com/gallery/legolandtimes3/archives/2008/archive-259.png"
myimages[12]="http://www.brickshelf.com/gallery/legolandtimes3/archives/2006/archive-006.png"
myimages[13]="http://www.brickshelf.com/gallery/legolandtimes3/archives/2006/archive-026.png"
myimages[14]="http://www.brickshelf.com/gallery/legolandtimes3/archives/2008/archive-240.png"
myimages[15]="http://www.brickshelf.com/gallery/legolandtimes3/archives/2008/archive-276.png"
myimages[16]="http://www.brickshelf.com/gallery/legolandtimes3/archives/2008/archive-281.png"
//specify corresponding links below
var imagelinks=new Array()
imagelinks[1]="http://legolandtimes.bravehost.com/news/2008/1/00218.html"
imagelinks[2]="http://legolandtimes.bravehost.com/news/2008/1/00217.html"
imagelinks[3]="http://legolandtimes.bravehost.com/news/2008/1/00215.html"
imagelinks[4]="http://legolandtimes.bravehost.com/news/2008/1/00213.html"
imagelinks[5]="http://legolandtimes.bravehost.com/news/2008/1/00211.html"
imagelinks[6]="http://legolandtimes.bravehost.com/news/2008/1/00210.html"
imagelinks[7]="http://legolandtimes.bravehost.com/news/2008/1/00237.html"
imagelinks[8]="http://legolandtimes.bravehost.com/news/2008/1/00249.html"
imagelinks[9]="http://legolandtimes.bravehost.com/news/2008/1/00250.html"
imagelinks[10]="http://legolandtimes.bravehost.com/news/2008/1/00255.html"
imagelinks[11]="http://legolandtimes.bravehost.com/news/2008/1/00259.html"
imagelinks[12]="http://legolandtimes.bravehost.com/news/2006/1/00006.html"
imagelinks[13]="http://legolandtimes.bravehost.com/news/2006/1/00026.html"
imagelinks[14]="http://legolandtimes.bravehost.com/news/2008/1/00240.html"
imagelinks[15]="http://legolandtimes.bravehost.com/news/2008/1/00276.html"
imagelinks[16]="http://legolandtimes.bravehost.com/news/2008/1/00281.html"
var ry=Math.floor(Math.random()*myimages.length)
if (ry==0)
ry=1
document.write('<a href='+'"'+imagelinks[ry]+'"'+'><img src="'+myimages[ry]+'" border=0></a>')
}
random_imglink()
//-->
</script>
// ]]>[/code]These elements are defined with CDATA as the content type. As a result they may contain only SGML characters. All markup characters or delimiters are ignored and passed as data to the application, except for ETAGO ("</") delimiters followed immediately by a name character [a-zA-Z]. This means that the element's end-tag (or that of an element in which it is nested) is recognized, while an error occurs if the ETAGO is invalid.If you had put those marks inside the SCRIPT element but outside the script itself, as Mr. Scrager had suggested, then the marks would themselves have been escaped and seen as a part of the script causing a syntax error. Putting them outside of the SCRIPT elemement escapes the SCRIPT tags and turns the tags themselves, and the script, into text. And you should be using the following DOCTYPE:
http://www.w3.org/TR/REC-html32#script [/quote]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">Only mark SCRIPTs as CDATA in XHTML, you are using HTML. From the HTML 3.2 Specification:If you had put those marks inside the SCRIPT element but outside the script itself, as Mr. Scrager had suggested, then the marks would themselves have been escaped and seen as a part of the script causing a syntax error. Putting them outside of the SCRIPT elemement escapes the SCRIPT tags and turns the tags themselves, and the script, into text.
[/QUOTE]
And you should be using the following DOCTYPE:[/QUOTE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
So as mine is HTML, what should I use instead of CDATA?[/QUOTE]Nothing at all, everybody already knows that the script is CDATA. This is all that you need:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Example</title>
<script type="text/javascript">
if (document.getElementById) onload = function () {
var p = document.createElement ('P');
p.appendChild (document.createTextNode ('Hello, World!'));
document.getElementsByTagName ('BODY')[0].appendChild(p);
}
</script><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML lang="en">
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<TITLE>Example</TITLE>
</HEAD>
<BODY>
<SCRIPT type="text/javascript">
<!--
if (document.getElementById) onload = function () {
var p = document.createElement ('P');
p.appendChild (document.createTextNode ('Hello, World!'));
document.getElementsByTagName ('BODY')[0].appendChild(p);
}
// -->
</SCRIPT>
</BODY>
</HTML>The reason why there are 2 <html> and <head>, <body> tags is that I am using an SSI[/QUOTE]These elements should only be in one file, the other included files must not have them as well.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
<!--#include file="script.txt" -->
</script>
<style type="text/css">
<!--#include file="css.txt" -->
</style>
</head>
<body>
<!--#include file="menu.txt" -->
<!--#include file="content.txt" -->
</body>
</html>
<div class="pd_menu_01 ">
<ul><li><a href="/">Home</a>
</li></ul>
<ul><li><a href="#">News</a>
<ul>
<li><a href="http://legolandtimes.bravehost.com/aaa-news.html" >Latest Headlines</a></li>
<li><a href="http://legolandtimes.bravehost.com/aaa-news-shorts.html" >In Brief</a></li>
<li><a href="http://legolandtimes.bravehost.com/aaa-news-archive.html" >Archives</a></li>
</ul>
</li></ul>
<ul><li><a href="football.shtml">Sport</a>
<ul>
<li><a href="football.shtml">Football</a></li>
</ul>
</li></ul>
<ul><li><a href="#">Resources</a>
<ul>
<li><a href="http://legolandtimes.bravehost.com/aaa-tlt-about.html" >About</a></li>
<li><a href="http://legolandtimes.bravehost.com/aaa-tlt-contact.html" >Contact</a></li>
</ul>
</li></ul>
</div>
[code=php]<style type="text/css" media="screen">
body{ behavior:url("csshover2.htc"); }
.pd_menu_01 {float:left; padding:0; margin:0;color: #000000;background: #D1D1D1;width:100%; border:solid 1px #FFFFFF;clear:both;} /*Color navigation bar normal mode*/
.pd_menu_01 a, .pd_menu_01 a:visited {
font-family:calibri;
font-style:normal;
font-weight:bold;
font-size:12px;
color: #000000;
background-color: #D1D1D1;
text-decoration: none;
}
.pd_menu_01 ul {list-style-type:none;padding:0; margin:0;}
.pd_menu_01 ul li {float:left; position:relative; z-index:auto !important ; z-index:1000 ; border-right:solid 1px #FFFFFF; border-left:solid 1px #FFFFFF;}
.pd_menu_01 ul li a {color: #000000;background: #D1D1D1;float:none !important ; float:left ; display:block; height:30px; line-height:30px; padding:0 10px 0 10px; text-decoration:none; }
.pd_menu_01 ul li ul {display:none; border:none;color: #000000;background: #D1D1D1; width:1px}
.pd_menu_01 ul li:hover a {background-color:#D1D1D1; text-decoration:none; color:#0482FF;} /*Color main cells hovering mode*/
.pd_menu_01 ul li:hover ul {display:block; position:absolute; z-index:999; top:29px; margin-top:1px; left:0;}
.pd_menu_01 ul li:hover ul li a {display:block; width:12em; height:auto; line-height:1.3em; margin-left:-1px; padding:5px 10px 5px 10px; border-left:solid 1px #FFFFFF; border-bottom: solid 1px #FFFFFF; background-color:#FFFFFF; color:#0482FF;} /*Color subcells normal mode*/
.pd_menu_01 ul li:hover ul li a:hover {background-color:#D1D1D1; text-decoration:none;color:#FFFFFF;} /*Color subcells hovering mode*/
.pd_menu_01 ul li a:hover {background-color:#D1D1D1; text-decoration:none;color:#0482FF;} /*Color main cells hovering mode*/
.pd_menu_01 ul li a:hover ul {display:block; width:12em; position:absolute; z-index:999; top:29px; left:0; }
.pd_menu_01 ul li ul li a:visited { background-color:#FFFFFF; color:#0482FF;} /*Color subcells normal mode*/
.pd_menu_01 ul li a:hover ul li a {display:block; width:12em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px #FFFFFF; border-bottom: solid 1px #FFFFFF; background-color:#FFFFFF; color:#0482FF;}
.pd_menu_01 ul li a:hover ul li a:hover {background-color:#D1D1D1; text-decoration:none;color:#FFFFFF;} /*Color subcells hovering mode*/
</style>
<img src="images-site/banner-main.png" alt="The Minifig Times">
<br>
<div class="pd_menu_01 ">
<ul><li><a href="/">Home</a>
</li></ul>
<ul><li><a href="#">News</a>
<ul>
<li><a href="http://legolandtimes.bravehost.com/aaa-news.html" >Latest Headlines</a></li>
<li><a href="http://legolandtimes.bravehost.com/aaa-news-shorts.html" >In Brief</a></li>
<li><a href="http://legolandtimes.bravehost.com/aaa-news-archive.html" >Archives</a></li>
</ul>
</li></ul>
<ul><li><a href="football.shtml">Sport</a>
<ul>
<li><a href="football.shtml">Football</a></li>
</ul>
</li></ul>
<ul><li><a href="#">Resources</a>
<ul>
<li><a href="http://legolandtimes.bravehost.com/aaa-tlt-about.html" >About</a></li>
<li><a href="http://legolandtimes.bravehost.com/aaa-tlt-contact.html" >Contact</a></li>
</ul>
</li></ul>
</div>
[/code]<style type="text/css">
<!--#include file="css.txt" -->
<!--#include file="menucss.txt" -->
</style>
<link rel="stylesheet" type="text/css" href="menucss.css" title="menu">
The filename extension of the included file can be anything that you like. I typiclly use ".inc" and then block outside access to ".in*".
The rule is that your include command gets completely replaced by the contents of the included file and all that matters is the final result. You can't combine in one file the style and HTML for your menu because each needs to end up in a different part of the resulting document. Sort of.
If your menu file contains the last part of the document's HEAD element and the first part of its BODY then it will work.[/QUOTE]
[code=php]
<style type="text/css" media="screen">
body{ behavior:url("csshover2.htc"); }
.pd_menu_01 {float:left; padding:0; margin:0;color: #000000;background: #D1D1D1;width:100%; border:solid 1px #FFFFFF;clear:both;} /*Color navigation bar normal mode*/
.pd_menu_01 a, .pd_menu_01 a:visited {
font-family:calibri;
font-style:normal;
font-weight:bold;
font-size:12px;
color: #000000;
background-color: #D1D1D1;
text-decoration: none;
}
.pd_menu_01 ul {list-style-type:none;padding:0; margin:0;}
.pd_menu_01 ul li {float:left; position:relative; z-index:auto !important ; z-index:1000 ; border-right:solid 1px #FFFFFF; border-left:solid 1px #FFFFFF;}
.pd_menu_01 ul li a {color: #000000;background: #D1D1D1;float:none !important ; float:left ; display:block; height:30px; line-height:30px; padding:0 10px 0 10px; text-decoration:none; }
.pd_menu_01 ul li ul {display:none; border:none;color: #000000;background: #D1D1D1; width:1px}
.pd_menu_01 ul li:hover a {background-color:#D1D1D1; text-decoration:none; color:#0482FF;} /*Color main cells hovering mode*/
.pd_menu_01 ul li:hover ul {display:block; position:absolute; z-index:999; top:29px; margin-top:1px; left:0;}
.pd_menu_01 ul li:hover ul li a {display:block; width:12em; height:auto; line-height:1.3em; margin-left:-1px; padding:5px 10px 5px 10px; border-left:solid 1px #FFFFFF; border-bottom: solid 1px #FFFFFF; background-color:#FFFFFF; color:#0482FF;} /*Color subcells normal mode*/
.pd_menu_01 ul li:hover ul li a:hover {background-color:#D1D1D1; text-decoration:none;color:#FFFFFF;} /*Color subcells hovering mode*/
.pd_menu_01 ul li a:hover {background-color:#D1D1D1; text-decoration:none;color:#0482FF;} /*Color main cells hovering mode*/
.pd_menu_01 ul li a:hover ul {display:block; width:12em; position:absolute; z-index:999; top:29px; left:0; }
.pd_menu_01 ul li ul li a:visited { background-color:#FFFFFF; color:#0482FF;} /*Color subcells normal mode*/
.pd_menu_01 ul li a:hover ul li a {display:block; width:12em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px #FFFFFF; border-bottom: solid 1px #FFFFFF; background-color:#FFFFFF; color:#0482FF;}
.pd_menu_01 ul li a:hover ul li a:hover {background-color:#D1D1D1; text-decoration:none;color:#FFFFFF;} /*Color subcells hovering mode*/
</style>
<img src="images-site/banner-main.png" alt="The Minifig Times">
<br>
<div class="pd_menu_01 ">
<ul><li><a href="/">Home</a>
</li></ul>
<ul><li><a href="#">News</a>
<ul>
<li><a href="http://legolandtimes.bravehost.com/aaa-news.html" >Latest Headlines</a></li>
<li><a href="http://legolandtimes.bravehost.com/aaa-news-shorts.html" >In Brief</a></li>
<li><a href="http://legolandtimes.bravehost.com/aaa-news-archive.html" >Archives</a></li>
</ul>
</li></ul>
<ul><li><a href="football.shtml">Sport</a>
<ul>
<li><a href="football.shtml">Football</a></li>
</ul>
</li></ul>
<ul><li><a href="#">Resources</a>
<ul>
<li><a href="http://legolandtimes.bravehost.com/aaa-tlt-about.html" >About</a></li>
<li><a href="http://legolandtimes.bravehost.com/aaa-tlt-contact.html" >Contact</a></li>
</ul>
</li></ul>
</div>
[/code]It is irrelevant if it is .shtml or .txt for the included files. Using .inc as [B]Charles [/B]suggests is a common notation. Only the 'parent' document must conform to the correct file extension for your server, probably .shtml
It is better to split style, JavaScript and code into separate files.
The style in your menu.txt can not be within the <body>, place it in the css.txt or as menucss.textBetter still is to use external css documents<style type="text/css">
<!--#include file="css.txt" -->
<!--#include file="menucss.txt" -->
</style>
[/QUOTE]<link rel="stylesheet" type="text/css" href="menucss.css" title="menu">
[code=php]
Line 147, Column 3: document type does not allow element "BR" here; missing one of "P", "H1", "H2", "H3", "H4", "H5", "H6", "PRE", "DIV", "ADDRESS" start-tag.
<br>
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>").[/code][code=php]
P.1-line-break {
}
P.2-line-break {
}
[/code][code=php]
<P class="2-line-break">text</P>[/code][code=php]<br>
<br>
<br>
<br>
<br>
<br>[/code][code=php]p.6-line-break {margin:6em 0;}[/code][code=php]<P class="6-line-break"></P> [/code][code=php]p.filler-menu-and-content {margin:0 0 6em 0;}[/code][code=php]<P class="filler-menu-and-content"> </P> [/code][code=php]<P class="filler-menu-and-content"> . </P> [/code].filler-menu-and-content {margin:0 0 6em 0;} <div class="pd_menu_01 filler-menu-and-content"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>The Minifig Times for all your Lego News</title>
<link rel="shortcut icon" href="http://legolandtimes.bravehost.com/lego-icon.ico">
<link rel="stylesheet" type="text/css" href="default.css">
and you have 2 closing style tags </style>[/QUOTE]
[code=php]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>The Minifig Times for all your Lego News</title>
<link rel="shortcut icon" href="http://legolandtimes.bravehost.com/lego-icon.ico">
<link rel="stylesheet" type="text/css" href="default.css">
<style type="text/css"><!--#include file="insert-menu-css.ins"-->
<meta name="description" content="A Lego news blog providing an insight into the crazy world of deranged Legomen otherwise known as minifigs.">
<meta name="abstract" content="The Minifig Times provides Lego news from the town, city, castle, pirates, train, space, technic and western themes.">
<meta name="robots" content="index,follow">
<meta name="googlebot" content="index,follow">
<meta name="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>[/code]0.1.9 — BETA 4.27