Switched from using a list to absolute positions to achieve more

consistant behavior across different browsers.

diff --git a/include/base.css b/include/base.css
index d4f8501ed72d6b37fe04a8804da09bb352b01c60..f57d20e39b3c35653ed8d2982f00b639def7201a 100644 (file)
--- 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;
+  /* collapse the extra keys on lower resolutions */
+  #showExtraKeysButton {
+    display: inline;
   }
-  #noVNC_extra_keys li {
-    display: block;
+  #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;
   }
-  /* collapse the extra keys on lower resolutions */
-  #showExtraKeysButton { display: inline; }
-  #toggleCtrlButton { display: none; }
-  #toggleAltButton {  display: none; }
-  #sendTabButton { display: none; }
-  #sendEscButton { display: none; }
 }
 
 @media screen and (min-width: 321px) and (max-width: 480px) {

diff --git a/vnc.html b/vnc.html
index 306ab85986a441288a61791a1be105b2b770c3e2..ae95551e7d2b80c970636a62a7e17760755353a3 100644 (file)
--- 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>