Fix issue reported by Frederic Ye

pixlpaste.opa

@@ -6,8 +6,6 @@
  * - rewrite browser compatiblity jonx
  *   - make it look nice on iphone?
  *
- * - windows: font size needs to be fixed
- *
  * - consider writing the file upload + drag'n' drop in opa instead of
  *   the external js binding jonx
  *
@@ -23,9 +21,11 @@
  *
  * - like / twitter buttons
  *
- * - submit feedback button (http://goo.gl/mod/G7PK) ?
+ * - drag'n'drop from other sites
+ *
+ * - flash img uploader for ie
  *
- * - professional redesign?
+ * - clean up css. Improve centering code?
  *
  * To compile:
  * - debug:
@@ -425,7 +425,7 @@ function resource display_pixlpaste() {
       <div class="help">
         <span id="help4_arrow" class="hidden"><img src="http://pixlpaste.s3.amazonaws.com/pixels/4.png"/></span>
       </div>
-      <div id="outer"><div id="middle"><div id="inner">
+      <div id="outer2"><div id="middle2"><div id="inner2">
         <div class="alert-message error hidden" id=#error/>
         <img id=#preview class="preview" src="http://pixlpaste.s3.amazonaws.com/pixels/preview.png" alt=""/>
         <br/>

resources/pixlpaste.css

@@ -26,8 +26,35 @@ body, html {
   position: relative;
   text-align: center;
   top: -50%;
+  margin-left: auto;
+  margin-right: auto;
+  width: 300px;
+  height: 200px;
 }
-#inner {
+#outer2 {
+  height: 100%;
+  position: relative;
+  width: 100%;
+}
+#outer2[id] {
+  display: table;
+  position: static;
+}
+#middle2 {
+  position: absolute;
+  text-align: center;
+  top: 50%;
+  width: 100%;
+}
+#middle2[id] {
+  display: table-cell;
+  position: static;
+  vertical-align: middle;
+}
+#inner2 {
+  position: relative;
+  text-align: center;
+  top: -50%;
   margin-left: auto;
   margin-right: auto;
   width: 300px;
@@ -42,15 +69,6 @@ body, html {
 .center {
   text-align: center;
 }
-.half {
-  width: 50%;
-  margin: 0;
-  float: left;
-}
-.half #inner {
-  width: 300px;
-  text-align: right;
-}
 .actions {
   margin: 100px 0 0 0;
 }