CSS Codes
CSS Layouts
Results 1 to 3 of 3

Thread: document type does not allow element "HTML" here

  1. 10-21-2008, 09:56 PM #1
    Cyclone
    Cyclone is offline Junior Coders
    Join Date
    Feb 2008
    Posts
    36
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default document type does not allow element "HTML" here

    Hi, I get these errors when I try to validate my page.

    1. document type does not allow element "HTML"
    2. "HTML" not finished but document ended.

    How can I fixe these errors? Thanks.

    Code:
    <!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=utf-8">

<html>
<head><title>Chris Schlosser's Portfolio</title></head>

<style type="text/css">
html
{
scrollbar-face-color: #7C92B8; scrollbar-3dlight-color: #7C92B8;
scrollbar-arrow-color: #276F91; scrollbar-track-color: #276F91;
scrollbar-shadow-color: #338BD4; scrollbar-highlight-color: lightblue;
}
body {background-color:#212630;color:#7C92B8;font-family:Times New Roman;font-size:22px}
a {text-decoration: underline}
a:link {color: #B4AEAE}
a:visited {color: #B4AEAE}
a:active {color: white}
a:hover {text-decoration: underline; color: white; style="border-color:white"}
</style>


<script type="text/javascript">

// Resize window (Maximize). //
top.window.moveTo(0,0);
if (document.all) {
top.window.resizeTo(screen.availWidth,screen.availHeight);
}
else if (document.layers||document.getElementById) {
if (top.window.outerHeight<screen.availHeight||top.window.outerWidth<screen.availWidth){
top.window.outerHeight = screen.availHeight;
top.window.outerWidth = screen.availWidth;
}
}
// End of resize Code. //

/***********************************************
* Image w/ description tooltip- By Dynamic Web Coding (www.dyn-web.com)
* Copyright 2002-2007 by Sharon Paine.
* Note this is an edited version. See link below for the original script.
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

// I replaced the 'tipcss.visibility' property throughout the original script with 'tipcss.display' to remove a bug that occurred when using an IFRAME inside the tooltip window. Some of the contents(table borders) in the IFRAME window would not disappear after the hidetip() function was called.
// The 'Xposition' and 'Yposition' variables were added to the 'doTooltip()' function so that the x/y tooltip offset positions can be specified seperately for each tooltip link.

var dom = (document.getElementById) ? true : false;
var ns5 = (!document.all && dom || window.opera) ? true: false;
var ie5 = ((navigator.userAgent.indexOf("MSIE")>-1) && dom) ? true : false;
var ie4 = (document.all && !dom) ? true : false;
var nodyn = (!ns5 && !ie4 && !ie5 && !dom) ? true : false;
var origWidth, origHeight;
var t1,t2;
var tipOn = false;
if (nodyn) { event = "nope" }

///////////////////////  CUSTOMIZE HERE   ////////////////////
var tipFollowMouse= true;
var tipWidth= 404;
var offX= 20; // Don't change the offX/offY positions here.
var offY= 22; // You can specify their values in the link code(onMouseover).
var tipFontFamily= "Verdana, arial, helvetica, sans-serif";
var tipFontSize= "8pt";
var tipFontColor= "#7C92B8";
var tipBgColor= "#212630";
var tipBorderColor= "#276F91";
var tipBorderWidth= 3;
var tipBorderStyle= "Solid";
var tipPadding= 0;
var messages = new Array();
messages[0] = new Array('http://www.inspiredvisuals.com/Pages/Photography/Shot_Info/AppleBlossoms2(Shot_Info).html');
////////////////////  END OF CUSTOMIZATION AREA  ///////////////////

if (document.images) {
	var theImgs = new Array();
	for (var i=0; i<messages.length; i++) {
  	theImgs[i] = new Image();
		theImgs[i].src = messages[i][0];
  }
}

var startStr = '<table width="' + tipWidth + '" CELLPADDING="0" CELLSPACING="0"><tr><td align="center" width="100%"><IFRAME src="'; // I replaced the 'img' tag with an 'IFRAME' tag and added some IFRAME attributes/JavaScript functions to the line below.
var midStr = '" width="400" height="593" scrolling="auto" FRAMEBORDER="0" onMouseover="clearTimeout(t2)"  onMouseout="hideTip(1)" </td></tr><tr><td valign="top">';
var endStr = '</td></tr></table>';
var tooltip, tipcss;

function initTip()
{
	if (nodyn) return;
	tooltip = (ie4)? document.all['tipDiv']: (ie5||ns5)? document.getElementById('tipDiv'): null;
	tipcss = tooltip.style;
	if (ie4||ie5||ns5) {
		tipcss.width = 'auto';
		tipcss.fontFamily = tipFontFamily;
		tipcss.fontSize = tipFontSize;
		tipcss.color = tipFontColor;
		tipcss.backgroundColor = tipBgColor;
		tipcss.borderColor = tipBorderColor;
		tipcss.borderWidth = tipBorderWidth+"px";
		tipcss.padding = tipPadding+"px";
		tipcss.borderStyle = tipBorderStyle;
		tipcss.textAlign='center';
		tipcss.margin='0 auto';
	}
	if (tooltip&&tipFollowMouse) {
		document.onmousemove = trackMouse;
	}
}

window.onload = initTip;

function doTooltip(evt,num,Xposition,Yposition)
{
	if (!tooltip) return;
	if (t1) clearTimeout(t1);
	if (t2) clearTimeout(t2);
	tipOn = true;
	offX = Xposition
	offY = Yposition

	if (messages[num][2])	var curBgColor = messages[num][2];
	else curBgColor = tipBgColor;

	if (messages[num][3])	var curFontColor = messages[num][3];
	else curFontColor = tipFontColor;

	if (ie4||ie5||ns5) {
		var tip = startStr + messages[num][0] + midStr + '<span style="font-family:' + tipFontFamily + '; font-size:' + tipFontSize + '; color:' + curFontColor + ';">' + messages[num][1] + '</span>' + endStr;
		tipcss.backgroundColor = curBgColor;
	 	tooltip.innerHTML = tip;
	}

	if (!tipFollowMouse) positionTip(evt);
	else t1=setTimeout("tipcss.display='block'",100);
}

var mouseX, mouseY;
function trackMouse(evt) {
standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
mouseX = (ns5)? evt.pageX: window.event.clientX + standardbody.scrollLeft;
mouseY = (ns5)? evt.pageY: window.event.clientY + standardbody.scrollTop;
if (tipOn) positionTip(evt);}

function positionTip(evt)
{
	if (!tipFollowMouse)
	{
		standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
		mouseX = (ns5)? evt.pageX: window.event.clientX + standardbody.scrollLeft;
		mouseY = (ns5)? evt.pageY: window.event.clientY + standardbody.scrollTop;
	}

	var tpWd = (ie4||ie5)? tooltip.clientWidth: tooltip.offsetWidth;
	var tpHt = (ie4||ie5)? tooltip.clientHeight: tooltip.offsetHeight;
	var winWd = (ns5)? window.innerWidth-20+window.pageXOffset: standardbody.clientWidth+standardbody.scrollLeft;
	var winHt = (ns5)? window.innerHeight-20+window.pageYOffset: standardbody.clientHeight+standardbody.scrollTop;

	if ((mouseX+offX+tpWd)>winWd)
		tipcss.left = mouseX-(tpWd+offX)+"px";
	else tipcss.left = mouseX+offX+"px";

	if ((mouseY+offY+tpHt)>winHt)
		tipcss.top = winHt-(tpHt+offY+Yposition)+"px";
	else tipcss.top = mouseY+offY+"px";
	if (!tipFollowMouse) t1=setTimeout("tipcss.display='block'",100);
}

function hideTip(mouseout)
{
	if (mouseout==1)
	{
		tipOn = false;
		t2=setTimeout("tipcss.display='none'",286);
		document.getElementById('link1').blur();
	}

	else

	{
		if (tipOn==true)
		{
		tipOn = false;
		t2=setTimeout("tipcss.display='none'",100);
		document.getElementById('link1').blur();
		}

		else

		{
		tipOn=true;
		tipcss.display='block';
		}
	}
}
document.write('<div id="tipDiv" style="position:absolute; display:none; z-index:100"></div>')
</script>

<div style="text-align:center"><h2>Apple Tree Flowers</h2>
<img src="http://www.inspiredvisuals.com/Photography/Images/Flora/AppleBlossoms2.jpg" alt="Apple Blossoms" style="border-color:#7C92B8;border:3px solid">
</div>

<TABLE style="border: 1px solid;border-color:#7C92B8;margin-top:20px;margin-left:auto;margin-right:auto;text-align:center" width="1027" CELLSPACING="3" CELLPADDING="3">
<TR>
<TD style="border: 1px solid">I liked the composition in this photo. It has good balance. Maybe if the lighting was from a different angle this photo could be improved. <a  href="javascript:hideTip(0)" onMouseover="doTooltip(event,0,18,-579)" onMouseout="hideTip(1)" id="link1">Shot Info</a></TD>
</TR>
</table>

<TABLE style="margin-left:auto;margin-top:25px;margin-right:auto;text-align:center" RULES="none" BORDER="0" CELLSPACING="3" CELLPADDING="3">
<TR>
<TD></TD>
<TD><a href="http://www.inspiredvisuals.com/Pages/Photography/Flora/LilacBush(TimeLapse).html">Previous</a></TD>
<TD><a href="javascript:window.close();">Close Window</a></TD>
<TD><a href="http://www.inspiredvisuals.com/Pages/Photography/Flora/BleedingHearts.html">Next</a></TD>
<TD></TD>
</TR>
</table>

</body>
</html>
    Last edited by Cyclone; 10-22-2008 at 12:11 AM.
    Reply With Quote Reply With Quote
  2. 10-21-2008, 11:48 PM #2
    Medyman's Avatar
    Medyman
    Medyman is offline Elite Coders
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    Your meta tag belongs inside the head element.
    Reply With Quote Reply With Quote

  3. The Following User Says Thank You to Medyman For This Useful Post:

    Cyclone (10-22-2008)
  4. 10-22-2008, 12:08 AM #3
    Cyclone
    Cyclone is offline Junior Coders
    Join Date
    Feb 2008
    Posts
    36
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    oops. Thanks.
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules