-1 div required to center properly (options & firstrun)

4chan_x.user.js

@@ -1221,8 +1221,8 @@
       var arr, back, checked, description, dialog, hiddenNum, hiddenThreads, input, key, li, obj, overlay, ta, time, ul, _i, _j, _len, _len2, _ref, _ref2, _ref3;
       dialog = $.el('div', {
         id: 'options',
+        className: 'reply dialog',
         innerHTML: '\
-<div class="reply dialog">\
 <div id=optionsbar>\
   <div id=credits>\
     <a target=_blank href=http://aeosynth.github.com/4chan-x/>4chan X</a>\
@@ -1299,7 +1299,6 @@
       <tr><td>Reset the unread count to 0</td><td><input name=unreadCountTo0></td></tr>\
     </tbody></table>\
   </div>\
-  </div>\
 </div>'
       });
       _ref = config.main;
@@ -1344,19 +1343,13 @@
         input.value = conf[input.name];
         $.bind(input, 'keydown', options.keybind);
       }
-      /*
-          Two parent divs are necessary to center on all browsers.
-      
-          Only one when Firefox and Opera will support flexboxes correctly.
-          https://bugzilla.mozilla.org/show_bug.cgi?id=579776
-          */
       overlay = $.el('div', {
         id: 'overlay'
       });
       $.bind(overlay, 'click', function() {
         return $.rm(overlay);
       });
-      $.bind(dialog.firstElementChild, 'click', function(e) {
+      $.bind(dialog, 'click', function(e) {
         return e.stopPropagation();
       });
       $.add(overlay, dialog);
@@ -3002,7 +2995,12 @@
       dialog = $.el('div', {
         id: 'overlay',
         className: 'firstrun',
-        innerHTML: "        <div id=options>          <div class='reply dialog'>            <p>Click the <strong>4chan X</strong> buttons for options; they are at the top and bottom of the page.</p>            <p>Updater options are in the updater dialog in replies at the bottom-right corner of the window.</p>            <p>If you don't see the buttons, try disabling your userstyles.</p>          </div>        </div>"
+        innerHTML: '\
+<div id=options class="reply dialog">\
+  <p>Click the <strong>4chan X</strong> buttons for options; they are at the top and bottom of the page.</p>\
+  <p>Updater options are in the updater dialog in replies at the bottom-right corner of the window.</p>\
+  <p>If you don\'t see the buttons, try disabling your userstyles.</p>\
+</div>'
       });
       $.add(d.body, dialog);
       return $.bind(window, 'click', firstRun.close);
@@ -3253,21 +3251,25 @@
       }\
 \
       #overlay {\
-        display: table;\
         position: fixed;\
         top: 0;\
         left: 0;\
         height: 100%;\
         width: 100%;\
+        text-align: center;\
         background: rgba(0,0,0,.5);\
       }\
-      #options {\
+      #overlay::before {\
-        display: table-cell;\
+        content: "";\
+        display: inline-block;\
+        height: 100%;\
         vertical-align: middle;\
       }\
-      #options .dialog {\
+      #options {\
-        margin: auto;\
+        display: inline-block;\
         padding: 5px;\
+        text-align: left;\
+        vertical-align: middle;\
         width: 500px;\
       }\
       #credits {\

script.coffee

@@ -865,8 +865,7 @@ options =
     $.replace home, a
 
   dialog: ->
-    dialog = $.el 'div', id: 'options', innerHTML: '
+    dialog = $.el 'div', id: 'options', className: 'reply dialog', innerHTML: '
-<div class="reply dialog">
 <div id=optionsbar>
   <div id=credits>
     <a target=_blank href=http://aeosynth.github.com/4chan-x/>4chan X</a>
@@ -943,7 +942,6 @@ options =
       <tr><td>Reset the unread count to 0</td><td><input name=unreadCountTo0></td></tr>
     </tbody></table>
   </div>
-  </div>
 </div>'
 
     #main
@@ -983,15 +981,9 @@ options =
       input.value = conf[input.name]
       $.bind input, 'keydown', options.keybind
 
-    ###
-    Two parent divs are necessary to center on all browsers.
-
-    Only one when Firefox and Opera will support flexboxes correctly.
-    https://bugzilla.mozilla.org/show_bug.cgi?id=579776
-    ###
     overlay = $.el 'div', id: 'overlay'
     $.bind overlay, 'click', -> $.rm overlay
-    $.bind dialog.firstElementChild, 'click', (e) -> e.stopPropagation()
+    $.bind dialog, 'click', (e) -> e.stopPropagation()
     $.add overlay, dialog
     $.add d.body, overlay
 
@@ -2258,14 +2250,12 @@ firstRun =
     dialog = $.el 'div',
       id: 'overlay'
       className: 'firstrun'
-      innerHTML: "
+      innerHTML: '
-        <div id=options>
+<div id=options class="reply dialog">
-          <div class='reply dialog'>
   <p>Click the <strong>4chan X</strong> buttons for options; they are at the top and bottom of the page.</p>
   <p>Updater options are in the updater dialog in replies at the bottom-right corner of the window.</p>
-            <p>If you don't see the buttons, try disabling your userstyles.</p>
+  <p>If you don\'t see the buttons, try disabling your userstyles.</p>
-          </div>
+</div>'
-        </div>"
     $.add d.body, dialog
 
     $.bind window, 'click', firstRun.close
@@ -2506,21 +2496,25 @@ Main =
       }
 
       #overlay {
-        display: table;
         position: fixed;
         top: 0;
         left: 0;
         height: 100%;
         width: 100%;
+        text-align: center;
         background: rgba(0,0,0,.5);
       }
-      #options {
+      #overlay::before {
-        display: table-cell;
+        content: "";
+        display: inline-block;
+        height: 100%;
         vertical-align: middle;
       }
-      #options .dialog {
+      #options {
-        margin: auto;
+        display: inline-block;
         padding: 5px;
+        text-align: left;
+        vertical-align: middle;
         width: 500px;
       }
       #credits {