...

View Full Version : Page doesn't validate with script embedded, but doesn't run with it linked.



phoenixshade
05-04-2007, 12:03 PM
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" />)


<!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>

_Aerospace_Eng_
05-04-2007, 03:15 PM
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.

glenngv
05-04-2007, 05:38 PM
Why on earth would a validator interpret "i<something" as a start tag?
You should enclose the script in CDATA section like this (http://www.codingforums.com/showthread.php?t=93005#post473270).

phoenixshade
05-05-2007, 12:26 AM
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.

felgall
05-05-2007, 12:54 AM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum