Assorted HTML/CSS fiddlings to make things work better in IE. I've

added a trivial doctype (IE complained without it), but that caused a
gap to appear between the puzzle and the status bar, so I tinkered a
bit more and ended up removing the <table> completely (no great loss)
as well as adding display:block to the canvas and explicitly setting
the width of not only the status bar div but also its parent div.
Meanwhile, I'm putting the "px" on the end of a lot of properties I
set from JS, because IE complains about that too if I don't.

[originally from svn r9809]
This commit is contained in:
Simon Tatham
2013-04-05 15:49:25 +00:00
parent 7479c2882d
commit 5dc559c8be
2 changed files with 25 additions and 26 deletions

View File

@ -57,6 +57,7 @@ EOF
}
print $outpage <<EOF;
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ASCII" />
@ -82,23 +83,16 @@ ${unfinishedpara}
<input type="button" id="random" value="Enter random seed">
<select id="gametype"></select>
</p>
<p align=center>
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<canvas id="puzzlecanvas" width="1" height="1" tabindex="1">
</td>
<tr>
<td id="statusbarholder">
</td>
</tr>
</table>
</p>
<p align=center>
Link to this puzzle:
<a id="permalink-desc">by game ID</a>
<a id="permalink-seed">by random seed</a>
</p>
<div align=center>
<canvas style="display: block" id="puzzlecanvas" width="1px" height="1px" tabindex="1">
</canvas>
<div id="statusbarholder" style="display: block">
</div>
<p>
Link to this puzzle:
<a id="permalink-desc">by game ID</a>
<a id="permalink-seed">by random seed</a>
</p>
</div>
<div id="apology">
Sorry, this Javascript puzzle doesn't seem to work on your web
@ -106,6 +100,7 @@ browser. Perhaps you have Javascript disabled, or perhaps your browser
doesn't provide a feature they depend on. These puzzles have been
successfully run in Firefox 19 and Chrome 25.
</div>
</div>
<hr>
${instructions}