Log in

View Full Version : w3c validation 2 errors.. DOCTYPE related prob.



tinkermob
12-01-2008, 04:41 AM
I have just finished my webpage, almost, and I thought I'd run it through the w3c validation service. I'm not a web dev so all of this is copy and paste, its got java, javascript and html of course. Luckily I only have two errors, simple ones and was hoping somebody could tell me exactly what I need to do to remedy these:

1: Mismatch between Public and System identifiers in the DOCTYPE declaration

This document uses an inconsistent DOCTYPE declaration. The Public Identifier -//W3C//DTD HTML 4.01 Transitional//EN declares the HTML 4.01 Transitional document type, but the associated System Identifier Transitional is http://www.w3.org/TR/html4/loose.dtd does not match this document type.

The recommended System Identifier for HTML 4.01 Transitional is http://www.w3.org/TR/html4/loose.dtd.

The safest way to use a correct DOCTYPE declaration is to copy and paste one from the recommended list and avoid editing that part of your markup by hand.


2: Line 4, Column 16: delimiter """ invalid: only delimiter ">", delimiter "[", "CDATA", "NDATA", "SDATA" and parameter separators are allowed.
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


This stuff looks simple, but I've tried the suggestions it gives and not really understood it. my webpage is below so you can try it, thanks!

http://www.projectmio.com

bluewalrus
12-01-2008, 05:21 AM
If I am correct which i think i am your problem is you've delcared all possible doc types as oppsed to 1.
Replace your first line with this and you'll have more errors (but the real errors as oppesed to hiding them). Also It is case sensitive so your META should be meta. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">.


Close your meta's

was with this meta FireFox extension"> should be
with this meta FireFox extension" />

Add in the type in this case java
was <script> should be<script type="text/javascript">

Use the code for &
was …heparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date()
should be
…heparameter=(url.indexOf("?")!=-1)? "&amp;"+new Date().getTime() : "?"+new Date()

Only declare body once you've declared it 3 times

<body onload="moveWindow()" style="overflow: hidden">
<div id="frontBottom"></div>
<script type='text/javascript' src='breakinorout.js'>

if your using a div id more than once its a class change it in html and in css from # to .
<div id="content"> will be <div class="content">

End your image tag and give it a description if it doesn't load and for apps that dont read the image to be able to the "/" at the end ends it the alt="" tells apps.

/meta/buttonsettle1a.png" border="0" alt="whatever this image is" /></a></h2>

Make sure to close all tags
<br> should be <br />

Try these changes and then rerun the test. If you still have questions post again.

Twey
12-01-2008, 07:01 AM
You almost certainly don't want an XHTML DOCTYPE — XHTML is currently unsupported by IE. You definitely don't want a transitional DOCTYPE — transitional DOCTYPEs are outdated, and nobody should have been using them for the past decade.

The DOCTYPE you probably want to have there is
<DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

The bad news is that this error is the error that says it doesn't know how to detect all the other errors. :) You'll probably get a lot more once you fix it.

Don't remove scrollbars from your page! Most users wouldn't think to use their keyboard to scroll down if there's no scrollbar available. My first reaction was 'well, that's a fairly useless page, isn't it.'

For that matter, having that huuuge header at the top really violates one of the big principles of Web design: your user should be able to see what the page is about within a few seconds of loading it. All a user sees on your page after loading is a word 'met.a' and a dangly thing. The page looks a lot saner without Java, but buggers right up without Javascript — there's no way to access the content without copy-pasting the link hrefs and splicing them into the URL.

Read and apply my common coding mistakes (http://dynamicdrive.com/forums/showpost.php?p=158839&postcount=1337), on the technical side of things. If you need a Web development tutorial to get up to speed, I recommend http://www.howtocreate.co.uk/.

Snookerman
12-01-2008, 01:07 PM
I agree with Twey, your page is very user unfriendly atm.

tinkermob
12-01-2008, 05:27 PM
Thanks for both your replies, I did what you said and like you said I got a lot more errors - 10 errors and 39 warnings!

I wanted this page to be accessible by all, not too bothered about IE users as IE seems like it doesn't like a lot of things but FF and Safari yes. I created seperate 800x600 and 640 versions (800.html and 640.html), a lot less Java in those. The site is art inspired and only took 30sec to draw on paper but weeks trying to make in real life, like I say I don't make webpages and this is my first, I stumbled upon w3c and wanted to make the best of it. The criteria for this site was to be open source only and completely different, so the rule book goes out the window for navigation.

Any ideas :)

BLiZZaRD
12-01-2008, 05:51 PM
IE is still the most widely used browser by about 30% (give or take) and what about those of us running 1440x900 resolution or higher, and those of us on Linux (the heart of Open Source)

Either your page isn't posted, or your redirect is very mean, but I can't access either page.

Following W3C validation standards with a strict DOCTYPE will make your site near 100% compatible with all major browsers.

tinkermob
12-01-2008, 08:03 PM
my redirect is mean and It shouldn't be up yet, sorry, my will hopefully be fine on anything over my own resolution of 128x654. Really the site was scaled down for 800x600 users and 640's, anything greater should be okay, I think.

I am offering a FireFox extension, so the majority of visitors, who decide to visit from the Mozilla add-on site, are going to be FF users, the rest I bet Safari and some IE. A lot of the code I saw had concessions for IE, if not then this... sort of stuff, so I thought, stuff it, "if IE then though" is my code.

I tried to get the code that would work cross platform and implement it as such, I don't know about Linux, why would my site not work on it? Is there a FF for Linux?

try www.projectmio.com or www.meta.projectmio.com

also www.projectmio.com/800.html
and www.projectmio.com/640.html
and www.projectmio.com/1024.html

Thanks.

BLiZZaRD
12-01-2008, 09:34 PM
Yes there is firefox for linux, and konqueror and many others. Being browser specific is "fine" (said grudgingly) for something as specific as you are doing, but I didn't realize that the first time through.

I can help get it validated if you can allow me to see the page ;)

tinkermob
12-01-2008, 11:12 PM
Thanks, the above links should work. Even out of the FF and Safari arena. I've never used the other ones an like I said I did try to pick the scripts with the least resistance.

Still game?

bluewalrus
12-02-2008, 01:43 AM
This might work since you said you dont care about IE i took out your if statements.
Also the content is now a class so make that .content instead of #content.
This brings it down to 6 not sure if it'll display everything the way it should so I'd wait for someone else that's a little better to look at it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- charset must remain utf-8 to be handled properly by Processing -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="add relevant metadata automatically to the images you download with this meta FireFox extension" />
<link rel="shortcut icon" href="http://www.projectmio.com/imagery/meta/favicon_w.ico"/>
<title>met.a</title>
<style type="text/css">
/* <![CDATA[ */
body {
margin: 0px 0px 0px 100px;
font-family: Century Gothic;
font-size: 11px;
background-color: #white;
text-decoration: none;
font-weight: normal;
line-height: normal;
}
p {font-family: Century Gothic}
a { color: #3399cc; }
a:link { color: #3399cc; text-decoration: underline; }
a:visited { color: #3399cc; text-decoration: underline; }
a:active { color: #3399cc; text-decoration: underline; }
a:hover { color: White; text-decoration: underline; background-color:#797979}
/* ]]> */
h2.pos_abs
{
position:absolute;
left:836px;
bottom:0px;
margin:0px;
}
h3.pos_abs
{
position:absolute;
left:75%;
top:100px;
margin:0px;
font-family: arial;
font-size:33px;
color: #797979;
}
.pos_abs
{
position:absolute;
left:839px;
top:100%;
margin:0px;
}
.pos_abs2
{
position:absolute;
left:70%;
top:196%;
color: white;
}
#leftcolumn{
float:left;
width:150px;
height: 200px;
border: 0px;
padding: 5px;
padding-left: 8px;

}

#leftcolumn a{
padding: 3px 1px;
display: block;
width: 100%;
text-decoration: none;
font-weight: normal;
border-bottom: 1px solid gray;
}

#leftcolumn a:hover{
background-color: #797979;
}

#rightcolumn{
float:left;
width:550px;
min-height: 200px;
border: 0px;
margin-left: 10px;
padding: 5px;
padding-bottom: 0px;
}
img {
border:0;
}
</style>
<script type='text/javascript' src='http://www.projectmio.com/code/meta/softscroll.js'></script>
<script type='text/javascript'>
// SoftScroll.go("section20");
</script>
<script type="text/javascript">

/***********************************************
* Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
* http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm
***********************************************/

var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&amp;"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 &amp;&amp; (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}

</script>

<script type="text/javascript">//<![CDATA[
function JumpToAnchor(anchorName)
{
SoftScroll.init();
SoftScroll.go(anchorName);
}
//]]>
</script>

</head>

<body onload="moveWindow()" style="overflow: hidden">
<script type='text/javascript' src='breakinorout.js'>
</script>
<div id="frontBottom"></div>
<div class="content">
<div id="attempt8_container">
<object classid="clsid:8AD9C840-044E-11D1-B3E9-00805F499D93"
codebase="http://java.sun.com/update/1.5.0/jinstall-1_5_0_15-windows-i586.cab"
width="600" height="600" standby="Loading Processing software..." >
<param name="code" value="attempt8" />
<param name="archive" value="/code/meta/attempt8.jar,/code/meta/core.jar" />
<param name="mayscript" value="true" />
<param name="scriptable" value="true" />
<param name="image" value="loading.gif" />
<param name="boxmessage" value="Loading Processing software..." />
<param name="boxbgcolor" value="#FFFFFF" />
<param name="test_string" value="inner" />
<p>

<strong>
This browser does not have a Java Plug-in.
<br />
<a href="http://java.sun.com/products/plugin/downloads/index.html" title="Download Java Plug-in">
Get the latest Java Plug-in here.
</a>
</strong>
</p>
</object>
</div>

</div>
<div class="pos_abs">
<div class="content">
<div id="half_Ocillation_Recursion_v4a_container">
<object classid="clsid:8AD9C840-044E-11D1-B3E9-00805F499D93" codebase="http://java.sun.com/update/1.5.0/jinstall-1_5_0_15-windows-i586.cab"
width="100" height="100" standby="Loading Processing software..." >
<param name="code" value="half_Ocillation_Recursion_v4a" />
<param name="archive" value="/code/meta/half_Ocillation_Recursion_v4a.jar,/code/meta/core.jar" />
<param name="mayscript" value="true" />
<param name="scriptable" value="true" />
<param name="image" value="loading.gif" />
<param name="boxmessage" value="Loading Processing software..." />
<param name="boxbgcolor" value="#FFFFFF" />
<param name="test_string" value="inner" />
<p>
<strong>
This browser does not have a Java Plug-in.
<br/>
<a href="http://java.sun.com/products/plugin/downloads/index.html" title="Download Java Plug-in">
Get the latest Java Plug-in here.
</a>
</strong>
</p>
</object>
</div>
</div>
</div>
<h2 class="pos_abs">
<a href="#Bottom" onclick="JumpToAnchor('Bottom'); return(false);"><img src="/imagery/meta/buttonsettle1a.png" alt="image" /></a></h2>
<h3 class="pos_abs">
met.a<br /></h3>
<div id="leftcolumn">
<a href="javascript:ajaxpage('/code/meta/what.htm', 'rightcolumn');">☃ What is <b>met.a</b> ??</a>
<a href="javascript:ajaxpage('/code/meta/guts.htm', 'rightcolumn');">☃ <b>met.a</b> has guts</a>
<a href="javascript:ajaxpage('/code/meta/osx.htm', 'rightcolumn');">☃ <b>met.a</b> on Mac OSX</a>
<a href="javascript:ajaxpage('/code/meta/win.htm', 'rightcolumn');">☃ <b>met.a</b> on Vista</a>
<a href="javascript:ajaxpage('/code/meta/thoughts.htm', 'rightcolumn');">☃ Thoughts behind <b>met.a</b></a>
<a href="javascript:ajaxpage('/code/meta/changelog.htm', 'rightcolumn');">☃ changelog</a>
<a href="javascript:ajaxpage('/code/meta/feedback.htm', 'rightcolumn');">☃ feedback</a>
<script type="text/javascript">
ajaxpage('/code/meta/what.htm', 'rightcolumn')
</script>
</div>
<div id="rightcolumn"><h3>Choose a page to load.</h3></div>
<div style="clear: left; margin-bottom: 1em"></div>
<div class="pos_abs">
<div id='Bottom'>_</div>
</div></body>
</html>

Twey
12-02-2008, 11:46 AM
If you stick with XHTML then you must set your Content-Type appropriately to prevent it being parsed as malformed HTML. Read this list of common coding errors (http://dynamicdrive.com/forums/showpost.php?p=158839&postcount=1337) and follow the links on the section about XHTML.

The use of Javascript to provide different pages based on screen size is a monumentally bad idea. It means you have to maintain n different versions of your page every time you make an update, and also disallows anyone without Javascript from viewing your page. If you code it properly in the first place, the page will resize itself appropriately.

You should have been validating your page as you coded, rather than leaving it to the last minute. When you know how to write mostly-correct pages without the aid of the validator then you can afford to do that, but until then you should validate after every new change (and check my list, too!).

bluewalrus: don't pixel-size your fonts, and don't use fonts without providing a generic font family on which to fall back (especially with weird and wacky fonts: I don't have a 'Century Gothic' font, and my computer wouldn't have a clue what to render instead if you don't provide it with one). The layout shouldn't be pixel-sized either. Does nobody read my links? I created that list precisely that I wouldn't have to type this out for every new page. That page still doesn't work without Javascript.

bluewalrus
12-02-2008, 01:07 PM
I did not touch the css's here i only went threw to get it to validate and changed id's to classes.

tinkermob
12-02-2008, 06:38 PM
bluewalrus: thanks for the code but it dissabled my Java applets.. eek!

Twey : You don't have century gothic, oh no, so what if I put it on the server, would it load for people who don't have it then?

Twey
12-02-2008, 08:28 PM
I'm afraid that those Java applets have got to go. :) They're not at all accessible, there's no sensible fallback, they take ages to load, and they're frankly huge, both in terms of bandwidth and screen real estate.

No, there is no way to force users to view your pages in the fonts you intended.

tinkermob
12-03-2008, 01:53 AM
Well those Java applets are not going anywhere. I've tried with the w3c, but its too rigid and I'm sure my site works on other computers except my own. W3c can go stuff itself quite frankly, but thanks everybody for your help!!

Twey
12-03-2008, 11:49 AM
It does, but fairly few of them (and 'works' here depends on whether the user thinks to scroll down what appears to be a blank-ish page, too).

The W3C standards really aren't 'rigid' at all. Most of the things about which you're complaining are just general good practice. If one constructs one's page sensibly in the first place, validation is usually just a case of fixing a few typos and/or incorrectly nested elements.

jscheuer1
12-03-2008, 06:12 PM
Actually you cannot have any standards in coding, without a certain degree of rigidity. Otherwise the standard would be - anything goes.

I think that rather than argue that coding standards aren't rigid (which they are - fairly well set, unlikely to change a lot very quickly), it would be more productive to point out the advantages in following them.

That said, it is the individual's choice whether to follow them or not. However, if you decide to go your own way, you are moving into territory where there are no readily apparent guidelines for diagnosing problems with your code, and less likelihood that what works today will work in newer browsers.

Many folks in refusing to adopt standards are being rigid, insofar as they are refusing to embrace a new (for them) approach.

It is also rigid to ask for help and then refuse it while thinking that one knows better than anyone else.

Twey
12-04-2008, 12:32 AM
I quoted it: I presume the original meaning that I was quoting was 'unreasonably rigid' :)

jscheuer1
12-04-2008, 05:44 AM
I will give you that to a degree, literally 'too rigid' - actually a relativistic term into which one could read from as representing quite a large range of possible meanings. Still, taking just your statement where you used simply "'rigid'" . . . In any case standards are almost by definition rigid, in this case definitely.

We shouldn't get too caught up in semantics though. Rigid in current usage has certain negative connotations that don't logically flow from its actual meaning. One might as well have said 'too structured', in which case the argument on both sides (which I think I covered in my previous post in a manner favorable to what both you and I believe) would have been much clearer. Though it would no longer apply as well, to wit:


It is also structured (rigid) to ask for help and then refuse it while thinking that one knows better than anyone else.