From 5dc559c8be1b8f6ed15f560433f25c952c874f93 Mon Sep 17 00:00:00 2001 From: Simon Tatham Date: Fri, 5 Apr 2013 15:49:25 +0000 Subject: [PATCH] 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 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] --- emcclib.js | 22 +++++++++++++--------- html/jspage.pl | 29 ++++++++++++----------------- 2 files changed, 25 insertions(+), 26 deletions(-) diff --git a/emcclib.js b/emcclib.js index 57dd2c4..b648684 100644 --- a/emcclib.js +++ b/emcclib.js @@ -525,18 +525,20 @@ mergeInto(LibraryManager.library, { * 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'; 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 @@ mergeInto(LibraryManager.library, { 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 @@ mergeInto(LibraryManager.library, { // 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"); diff --git a/html/jspage.pl b/html/jspage.pl index 376d39a..ae775ec 100755 --- a/html/jspage.pl +++ b/html/jspage.pl @@ -57,6 +57,7 @@ EOF } print $outpage < @@ -82,23 +83,16 @@ ${unfinishedpara}

-

-

- - - - - -
- -
-
-

-

- Link to this puzzle: - by game ID - by random seed -

+
+ + +
+
+

+ Link to this puzzle: + by game ID + by random seed +

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.
+
${instructions}