ref: 5dc559c8be1b8f6ed15f560433f25c952c874f93
parent: 7479c2882dfa7c3b75653c728ade1997734f3d01
author: Simon Tatham <anakin@pobox.com>
date: Fri Apr 5 11:49:25 EDT 2013
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]
--- a/emcclib.js
+++ b/emcclib.js
@@ -525,11 +525,13 @@
* back end turns out to want one.
*/
js_canvas_make_statusbar: function() {- var statustd = document.getElementById("statusbarholder");+ var statusholder = document.getElementById("statusbarholder"); statusbar = document.createElement("div");statusbar.style.overflow = "hidden";
- statusbar.style.width = onscreen_canvas.width - 4;
+ statusbar.style.width = (onscreen_canvas.width - 4) + "px";
+ statusholder.style.width = onscreen_canvas.width + "px";
statusbar.style.height = "1.2em";
+ statusbar.style.textAlign = "left";
statusbar.style.background = "#d8d8d8";
statusbar.style.borderLeft = '2px solid #c8c8c8';
statusbar.style.borderTop = '2px solid #c8c8c8';
@@ -536,7 +538,7 @@
statusbar.style.borderRight = '2px solid #e8e8e8';
statusbar.style.borderBottom = '2px solid #e8e8e8';
statusbar.appendChild(document.createTextNode(" "));- statustd.appendChild(statusbar);
+ statusholder.appendChild(statusbar);
},
/*
@@ -560,8 +562,10 @@
js_canvas_set_size: function(w, h) {onscreen_canvas.width = w;
offscreen_canvas.width = w;
- if (statusbar !== null)
- statusbar.style.width = w - 4;
+ if (statusbar !== null) {+ statusbar.style.width = (w - 4) + "px";
+ document.getElementById("statusbarholder").style.width = w + "px";+ }
onscreen_canvas.height = h;
offscreen_canvas.height = h;
@@ -587,15 +591,15 @@
// Now create a form which sits on top of that in turn.
dlg_form = document.createElement("form");- dlg_form.style.width = window.innerWidth * 2 / 3;
+ dlg_form.style.width = (window.innerWidth * 2 / 3) + "px";
dlg_form.style.opacity = 1;
dlg_form.style.background = '#ffffff';
dlg_form.style.color = '#000000';
dlg_form.style.position = 'absolute';
dlg_form.style.border = "2px solid black";
- dlg_form.style.padding = 20;
- dlg_form.style.top = window.innerHeight / 10;
- dlg_form.style.left = window.innerWidth / 6;
+ dlg_form.style.padding = "20px";
+ dlg_form.style.top = (window.innerHeight / 10) + "px";
+ dlg_form.style.left = (window.innerWidth / 6) + "px";
dlg_form.style["z-index"] = 100;
var title = document.createElement("p");--- a/html/jspage.pl
+++ b/html/jspage.pl
@@ -57,6 +57,7 @@
}
print $outpage <<EOF;
+<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ASCII" />
@@ -82,23 +83,16 @@
<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
@@ -105,6 +99,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>