From bd88b943938deddde09f8459b0b96ea82a542f12 Mon Sep 17 00:00:00 2001
From: samhed <samuel@cendio.se>
Date: Thu, 25 Jul 2013 15:34:16 +0200
Subject: [PATCH] Switched from using a list to absolute positions to achieve
 more consistant behavior across different browsers.

---
 include/base.css | 47 +++++++++++++++++++++++++++--------------------
 vnc.html         | 34 +++++++++++++++++-----------------
 2 files changed, 44 insertions(+), 37 deletions(-)

diff --git a/include/base.css b/include/base.css
index d4f8501e..f57d20e3 100644
--- a/include/base.css
+++ b/include/base.css
@@ -413,14 +413,6 @@ html {
   margin-left: 0px;
 }
 
-#noVNC_extra_keys {
-  float: none;
-  top: 0px;
-}
-#noVNC_extra_keys li {  
-  display: inline;
-}
-
 #showExtraKeysButton { display: none; }
 #toggleCtrlButton { display: inline; }
 #toggleAltButton {  display: inline; }
@@ -454,19 +446,34 @@ html {
   .noVNC-buttons-right {
     padding-right: 0px;
   }
-  #noVNC_extra_keys {
-    float: right;
-    top: -35px;
-  }
-  #noVNC_extra_keys li {
-    display: block;
-  }
   /* collapse the extra keys on lower resolutions */
-  #showExtraKeysButton { display: inline; }
-  #toggleCtrlButton { display: none; }
-  #toggleAltButton {  display: none; }
-  #sendTabButton { display: none; }
-  #sendEscButton { display: none; }
+  #showExtraKeysButton {
+    display: inline;
+  }
+  #toggleCtrlButton {
+    display: none;
+    position: absolute;
+    top: 30px;
+    left: 0px;
+  }
+  #toggleAltButton {
+    display: none;
+    position: absolute;
+    top: 65px;
+    left: 0px;
+  }
+  #sendTabButton {
+    display: none;
+    position: absolute;
+    top: 100px;
+    left: 0px;
+  }
+  #sendEscButton {
+    display: none;
+    position: absolute;
+    top: 135px;
+    left: 0px;
+  }
 }
 
 @media screen and (min-width: 321px) and (max-width: 480px) {
diff --git a/vnc.html b/vnc.html
index 306ab859..ae95551e 100644
--- a/vnc.html
+++ b/vnc.html
@@ -68,23 +68,23 @@
                     value="Keyboard" title="Show Keyboard"/>
                 <input type="email" autocapitalize="off" autocorrect="off"
                     id="keyboardinput" class=""/>
-                <ul id="noVNC_extra_keys">
-                    <li><input type="image" src="images/showextrakeys.png"
-                            id="showExtraKeysButton"
-                            class="noVNC_status_button"></li>
-                    <li><input type="image" src="images/ctrl.png"
-                            id="toggleCtrlButton"
-                            class="noVNC_status_button"></li>
-                    <li><input type="image" src="images/alt.png"
-                            id="toggleAltButton"
-                            class="noVNC_status_button"></li>
-                    <li><input type="image" src="images/tab.png"
-                            id="sendTabButton"
-                            class="noVNC_status_button"></li>
-                    <li><input type="image" src="images/esc.png"
-                            id="sendEscButton"
-                            class="noVNC_status_button"></li>
-                </ul>
+                <div id="noVNC_extra_keys">
+                    <input type="image" src="images/showextrakeys.png"
+                        id="showExtraKeysButton"
+                        class="noVNC_status_button">
+                    <input type="image" src="images/ctrl.png"
+                        id="toggleCtrlButton"
+                        class="noVNC_status_button">
+                    <input type="image" src="images/alt.png"
+                        id="toggleAltButton"
+                        class="noVNC_status_button">
+                    <input type="image" src="images/tab.png"
+                        id="sendTabButton"
+                        class="noVNC_status_button">
+                    <input type="image" src="images/esc.png"
+                        id="sendEscButton"
+                        class="noVNC_status_button">
+                </div>
             </div>
         </div>