Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Feb 2007
    Location
    near Washington, DC
    Posts
    135
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Page doesn't validate with script embedded, but doesn't run with it linked.

    Why on earth would a validator interpret "i<something" as a start tag? And worse, when I link the javascript externally with NO CHANGES AT ALL to the code, the now-valid XHTML page returns no output. What could cause this?

    I'm inserting the entire page here without comment, but this question is general enough that I don't think it's necessary in order to answer the question.

    EDIT: I forgot to say this, but of course this problem only exists in the POS browser that is IE.

    EDIT: I found the problem. IE does not properly handle a self-closing script tag (e.g. <script type="text/javascript" src"somefile.js" />)

    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 http-equiv="Content-Script-Type" content="text/javascript" />
    	<title>Create New Lesson - Chess Instruction Live</title>
    	<link rel="shortcut icon" href="favicon.ico" />
    	<style type="text/css">
    body {
    	background:#FDFDFD;
    	font-family:"trebuchet ms",verdana,sans-serif;
    }
    #wrap {
    	width:955px;
    	margin:0 auto;
    	position:relative;
    }
    .border {
    	background:#666 url(img/border.gif) repeat-x;
    	width:100%;
    	height:24px;
    }
    #header {
    	background:url(img/logo.gif) no-repeat;
    	height:150px;
    	text-align:right;
    }
    #header ul {
    	margin:0;
    	padding:15px 0 0 0;
    	list-style:none;
    	width:714px;
    	float:right;
    	font-weight:bold;
    }
    #header li {
    	background-color:#CDCDCF;
    	margin:0;
    	padding:0;
    	text-align:center;
    	width:117px;
    	float:left;
    	border:solid 1px #FDFDFD;
    }
    #header li a {
    	color:#000;
    	font-size:14px;
    	line-height:22px;
    	text-decoration:none;
    	width:100%;
    	display:block;
    }
    #header li:hover {
    	background-color:#FDFDFD;
    }
    #header form {
    	margin-top:15px;
    	float:right;
    	display:block;
    	clear:right;
    	width:100%;
    }
    #k a {font-size:16px;}
    #k:hover {background:url(img/sbk.gif) no-repeat 0% 40%;}
    #q:hover {background:url(img/sbq.gif) no-repeat 0% 40%;}
    #r:hover {background:url(img/sbr.gif) no-repeat 0% 40%;}
    #b:hover {background:url(img/sbb.gif) no-repeat 0% 40%;}
    #n:hover {background:url(img/sbn.gif) no-repeat 0% 40%;}
    #p:hover {background:url(img/sbp.gif) no-repeat 0% 40%;}
    #content {
    	padding:0 15px 15px 20px;
    	text-align:justify;
    	overflow:auto;
    }
    a {text-decoration:none;}
    a:hover {text-decoration:underline;}
    #tools, #debug {
    	margin-bottom:5px;
    	width:908px;
    	height:100px;
    	border:solid 1px #999;
    	padding:0 5px;
    	clear:both;
    }
    #chat {
    	margin-bottom:5px;
    	float:left;
    	clear:left;
    	width:515px;
    	height:386px;
    	border:solid 1px #999;
    	padding:0 5px;
    	text-align:left;
    	font-size:13px;
    	overflow:hidden;
    }
    #chat p {
    	margin:6px 0;
    	line-height:1.2em;
    }
    
    #pieces {margin-left:20px;}
    #pieces img {margin:0 3px;}
    #pieces form {margin:0;}
    #board {
    /*	position:relative; */
    	margin-bottom:5px;
    	float:right;
    	clear:right;
    	width:384px;
    	height:384px;
    	border:solid 2px #000;
    	background:url(img/board.gif) repeat top left;
    }
    .sq {
    	height:48px;
    	width:48px;
    	float:left;
    }
    .nf {clear:left;}
    #write {
    	float:left;
    	clear:left;
    	margin-bottom:5px;
    	width:525px;
    }
    #moves {
    	float:right;
    	clear:right;
    	margin-bottom:5px;
    	width:384px;
    	text-align:center;
    }
    #footer {
    	background:url(img/footer.gif) no-repeat;
    	height:76px;
    }
    h1,h2,h3,h4,h5,h6 {font-family:"trebuchet ms",verdana,sans-serif;}
    #debug {font-size:10px; overflow:scroll;}
    	</style>
    	<script type="text/javascript">
    var putPiece;
    var pieces = new Array(64);
    var hilite = new Array(64);
    function selectPiece(piece) {
    	putPiece = piece;
    	boardArea.style.cursor = 'url("img/' + piece + '.cur"),default';
    	for (var i=0; i<allBoard.length; i++) {
    		var name = allBoard[i].className;
    		if (name.match("sq")) {
    			allBoard[i].onclick = addPiece;
    		}
    	}
    }
    function selectHighlight() {
    	boardArea.style.cursor = 'url("img/hl.cur"),default';
    	for (var i=0; i<allBoard.length; i++) {
    		var name = allBoard[i].className;
    		if (name.match("sq")) {
    			allBoard[i].onclick = highlight;
    		}
    	}
    }
    function selectDelete() {
    	boardArea.style.cursor = 'url("img/del.cur"),default';
    	for (var i=0; i<allBoard.length; i++) {
    		var name = allBoard[i].className;
    		if (name.match("sq")) {
    			allBoard[i].onclick = delPiece;
    		}
    	}
    }
    function addPiece() {
    	var square = getY(this)*8 + getX(this);
    	pieces[square] = pieceCode(putPiece);
    	this.innerHTML = '<img src="img/' + putPiece + '.gif" alt="Chess Piece" />';
    }
    function delPiece() {
    	var square = getY(this)*8 + getX(this);
    	pieces[square] = '';
    	hilite[square] = 0;
    	this.innerHTML = '';
    	this.style.backgroundColor='transparent';
    }
    function highlight() {
    	var localX = getX(this);
    	var localY = getY(this);
    	var square = localY*8 + localX;
    	var sumXY = localX + localY;
    	hilite[square] = 1;
    	if (sumXY%2) {
    		this.style.backgroundColor='#FF6';
    	} else {
    		this.style.backgroundColor='#CC3';
    	}
    }
    function getX(square) {
    	var squareX = square.id.charCodeAt(0) - 97;
    	return squareX;
    }
    function getY(square) {
    	var squareY = square.id.charCodeAt(1) - 49;
    	return squareY;
    }
    function pieceCode(piece) {
    	var pieceType = piece.charAt(1);
    	if (piece.charAt(0) == 'w') {
    		pieceType = pieceType.toUpperCase();
    	}
    	return pieceType;
    }
    function encodePosition() {
    	var position = '!';
    	for (var y=0; y<8; y++) {
    		for (var x=0; x<8; x++) {
    			if (pieces[y*8+x]){
    				position += pieces[y*8+x] + String.fromCharCode(y*8+x+65);
    			}
    		}
    	}
    	return position;
    }
    function encodeHilite() {
    	var hilited = '*';
    	for (var y=0; y<8; y++) {
    		for (var x=0; x<8; x++) {
    			if (hilite[y*8+x]) {
    				hilited += String.fromCharCode(y*8+x+65);
    			}
    		}
    	}
    	return hilited + '*';
    }
    function storePosition() {
    }
    window.onload = function() {
    	debugArea = document.getElementById('debug');
    	boardArea = document.getElementById('board');
    	allBoard = boardArea.getElementsByTagName('*');
    }
    	</script>
    </head>
    	
    <body>
    	<div id="wrap">
    		<div id="header">
    			<img src="img/title.gif" style="float:right;" alt="Chess Instruction LIVE" />
    			<form id="login" action="javascript:void(0);">
    				<p><b>Member Sign-In:</b>&nbsp;&nbsp;Username<input type="text" size="13" id="username" name="username" />&nbsp;&nbsp;Password<input type="password" size="13" id="password" name="password" />&nbsp;&nbsp;<input type="checkbox" value="yes" id="remember" name="remember" />Remember Me&nbsp;&nbsp;<input type="submit" value="Sign In" id="signin" name="signin" /></p>
    			</form>
    			<p style="clear:right; margin:0; font-size:12px;"><a href="register.php">New members register FREE!</a>&nbsp;&nbsp;&nbsp;<a href="recover.php">Forgotten username/password?</a></p>
    			<ul><li id="k"><a href="myhome.php">MY HOME</a></li>
    				<li id="q"><a href="schedule.php">Schedule</a></li>
    				<li id="b"><a href="create.php">New Class</a></li>
    				<li id="n"><a href="review.php">Review</a></li>
    				<li id="r"><a href="forums.php">Discussion</a></li>
    				<li id="p"><a href="links.php">Chess Links</a></li>
    			</ul>
    		</div>
    		<div id="content">
    			<h2>Create New Lesson</h2>
    			<div id="tools">
    			</div>
    			<div id="chat">
    				<div id="pieces">
    					<p><b>Place Pieces:</b> Click on a piece, then click squares on the board to place.</p>
    					<img src="img/wk.gif" alt="White King" onclick="selectPiece('wk');" />
    					<img src="img/wq.gif" alt="White Queen" onclick="selectPiece('wq');" />
    					<img src="img/wr.gif" alt="White Rook" onclick="selectPiece('wr');" />
    					<img src="img/wb.gif" alt="White Bishop" onclick="selectPiece('wb');" />
    					<img src="img/wn.gif" alt="White Knight" onclick="selectPiece('wn');" />
    					<img src="img/wp.gif" alt="White Pawn" onclick="selectPiece('wp');" />
    					<img src="img/hl.gif" alt="Highlight" onclick="selectHighlight();" /><br />
    					<img src="img/bk.gif" alt="Black King" onclick="selectPiece('bk');" />
    					<img src="img/bq.gif" alt="Black Queen" onclick="selectPiece('bq');" />
    					<img src="img/br.gif" alt="Black Rook" onclick="selectPiece('br');" />
    					<img src="img/bb.gif" alt="Black Bishop" onclick="selectPiece('bb');" />
    					<img src="img/bn.gif" alt="Black Knight" onclick="selectPiece('bn');" />
    					<img src="img/bp.gif" alt="Black Pawn" onclick="selectPiece('bp');" />
    					<img src="img/del.gif" alt="Delete" onclick="selectDelete();" /><br />
    					<form action="javascript:storePosition();"><p><b>Side To Move:</b> <input type="radio" name="move" value="white" checked="checked" />White. <input type="radio" name="move" value="black" />Black.<br />
    					<b>Evaluation:</b> <input type="radio" name="eval" value="white" />White Wins. <input type="radio" name="eval" value="draw" />Draw. <input type="radio" name="eval" value="black" />Black Wins.<br />
    					<input type="submit" value="Save Position" name="savepos" id="savepos" /><input type="submit" value="Edit Position" name="editpos" id="editpos" disabled="disabled" /></p>
    					</form>
    				</div>
    			</div>
    			<div id="board">
    				<div class="sq" id="a8"></div>
    				<div class="sq" id="b8"></div>
    				<div class="sq" id="c8"></div>
    				<div class="sq" id="d8"></div>
    				<div class="sq" id="e8"></div>
    				<div class="sq" id="f8"></div>
    				<div class="sq" id="g8"></div>
    				<div class="sq" id="h8"></div>
    				<div class="sq nf" id="a7"></div>
    				<div class="sq" id="b7"></div>
    				<div class="sq" id="c7"></div>
    				<div class="sq" id="d7"></div>
    				<div class="sq" id="e7"></div>
    				<div class="sq" id="f7"></div>
    				<div class="sq" id="g7"></div>
    				<div class="sq" id="h7"></div>
    				<div class="sq nf" id="a6"></div>
    				<div class="sq" id="b6"></div>
    				<div class="sq" id="c6"></div>
    				<div class="sq" id="d6"></div>
    				<div class="sq" id="e6"></div>
    				<div class="sq" id="f6"></div>
    				<div class="sq" id="g6"></div>
    				<div class="sq" id="h6"></div>
    				<div class="sq nf" id="a5"></div>
    				<div class="sq" id="b5"></div>
    				<div class="sq" id="c5"></div>
    				<div class="sq" id="d5"></div>
    				<div class="sq" id="e5"></div>
    				<div class="sq" id="f5"></div>
    				<div class="sq" id="g5"></div>
    				<div class="sq" id="h5"></div>
    				<div class="sq nf" id="a4"></div>
    				<div class="sq" id="b4"></div>
    				<div class="sq" id="c4"></div>
    				<div class="sq" id="d4"></div>
    				<div class="sq" id="e4"></div>
    				<div class="sq" id="f4"></div>
    				<div class="sq" id="g4"></div>
    				<div class="sq" id="h4"></div>
    				<div class="sq nf" id="a3"></div>
    				<div class="sq" id="b3"></div>
    				<div class="sq" id="c3"></div>
    				<div class="sq" id="d3"></div>
    				<div class="sq" id="e3"></div>
    				<div class="sq" id="f3"></div>
    				<div class="sq" id="g3"></div>
    				<div class="sq" id="h3"></div>
    				<div class="sq nf" id="a2"></div>
    				<div class="sq" id="b2"></div>
    				<div class="sq" id="c2"></div>
    				<div class="sq" id="d2"></div>
    				<div class="sq" id="e2"></div>
    				<div class="sq" id="f2"></div>
    				<div class="sq" id="g2"></div>
    				<div class="sq" id="h2"></div>
    				<div class="sq nf" id="a1"></div>
    				<div class="sq" id="b1"></div>
    				<div class="sq" id="c1"></div>
    				<div class="sq" id="d1"></div>
    				<div class="sq" id="e1"></div>
    				<div class="sq" id="f1"></div>
    				<div class="sq" id="g1"></div>
    				<div class="sq" id="h1"></div>
    			</div>
    			<div id="write">
    				<form action="javascript:sendChat();" id="chatform">
    					<p><input id="newchat" name="newchat" type="text" size="75" /><input type="submit" value="Talk" /></p>
    				</form>
    			</div>
    			<div id="moves">
    				<b>Black to Move.</b> White wins.
    			</div>
    			<div id="debug"></div>
    		</div>
    		<div id="footer"></div>
    	</div>
    </body>
    
    </html>
    Last edited by phoenixshade; 05-04-2007 at 01:56 PM. Reason: Found a solution
    — Wilford Nusser
    Validate Your Code: (X)HTML CSS
    An HTML Email is NOT a Web Page: HTML Email Guide (1.2Mb pdf) Webmail CSS Support
    REGEX: Brought to you by Psychotic Crack-Smoking Monkeys

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Quote Originally Posted by phoenixshade View Post
    Why on earth would a validator interpret "i<something" as a start tag? And worse, when I link the javascript externally with NO CHANGES AT ALL to the code, the now-valid XHTML page returns no output. What could cause this?

    I'm inserting the entire page here without comment, but this question is general enough that I don't think it's necessary in order to answer the question.

    EDIT: I forgot to say this, but of course this problem only exists in the POS browser that is IE.

    EDIT: I found the problem. IE does not properly handle a self-closing script tag (e.g. <script type="text/javascript" src"somefile.js" />)
    And it shouldn't IMO. A script tag has never been a tag that had no closing tag. Its always had one. This has been discussed time and time again.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Quote Originally Posted by phoenixshade View Post
    Why on earth would a validator interpret "i<something" as a start tag?
    You should enclose the script in CDATA section like this.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #4
    Regular Coder
    Join Date
    Feb 2007
    Location
    near Washington, DC
    Posts
    135
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    And it shouldn't IMO. A script tag has never been a tag that had no closing tag. Its always had one. This has been discussed time and time again.
    Your opinion wasn't what I asked for. I asked for what was CORRECT. According to the W3C XHTML 1.0 Recommendation, a self-terminated script element should work. (That's why it validates, after all.) Firefox handles this just fine.

    glenngv, thanks for the USEFUL response.
    Last edited by phoenixshade; 05-05-2007 at 01:58 AM.
    — Wilford Nusser
    Validate Your Code: (X)HTML CSS
    An HTML Email is NOT a Web Page: HTML Email Guide (1.2Mb pdf) Webmail CSS Support
    REGEX: Brought to you by Psychotic Crack-Smoking Monkeys

  • #5
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    A self terminating script tag will work if the page is served as XHTML and not as HTML. IE can't handle XHTML pages served as XHTML and so you need to follow the instructions in the appropriate appendix of the standards on how to modify your XHTML so that it can be handled as HTML by IE which means that only singleton tags should use the self closing method and that they should have a space inserted before the slash so that IE will ignore it.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Posting Permissions

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