w3c validation 2 errors.. DOCTYPE related prob.

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

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)? "&"+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.

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

Code:

<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, 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/.

I agree with Twey, your page is very user unfriendly atm.

I like my page even if w3c don't

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 :)

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.

redirect code removed

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.

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 ;)

one step closer

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?

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.

Code:

<!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>  <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)? "&"+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 && (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>