Fix text alignment on settings/system page.

Fixes the vertical alignment of titles on the settings/system page for Chrome OS. Fixed the positioning of slider labels for RTL languages.

TEST=Launch Chrome built for Chrome OS.  Switch to the settings/system page.  Inspect the vertical alignment of titles.  Relaunch in Arabic.  Check the positioning of the slider labels.


Review URL: http://codereview.chromium.org/7108040

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@88663 0039d316-1c4b-4281-b951-d872f2087c98

chrome/browser/resources/options/chromeos/accounts_options_page.css

@@ -73,7 +73,6 @@
   width: 366px;
 }
 
-
 #ownerOnlyWarning {
   margin-top: 10px;
   margin-bottom: 10px;

chrome/browser/resources/options/chromeos/system_options.html

@@ -3,91 +3,74 @@
   <div class="displaytable">
     <section>
       <h3 i18n-content="datetime_title"></h3>
-      <table class="option-control-table">
-        <tr>
-          <td class="option-name" i18n-content="timezone"></td>
-          <td class="option-value">
+      <div class="option-control-table">
+        <span class="option-name" i18n-content="timezone"></span>
+        <div id="timezone-value">
           <select id="timezone-select" class="control"
-               i18n-options="timezoneList"
-               dataType="string"
-               pref="cros.system.timezone"></select>
-          </td>
-        <tr>
-          <td class="option-name" colspan="2">
-            <div class="checkbox">
-              <label>
-                <input id="use-24hour-clock"
-                    pref="settings.clock.use_24hour_clock"
-                    type="checkbox">
-                <span i18n-content="use_24hour_clock"></span>
-              </label>
-            </div>
-          </td>
-        </tr>
-        </tr>
-      </table>
+              i18n-options="timezoneList"
+              dataType="string"
+              pref="cros.system.timezone"></select>
+        </div>
+        <div class="checkbox">
+          <label>
+            <input id="use-24hour-clock"
+                pref="settings.clock.use_24hour_clock"
+                type="checkbox">
+            <span i18n-content="use_24hour_clock"></span>
+          </label>
+        </div>
+      </div>
     </section>
     <section>
       <h3 i18n-content="touchpad"></h3>
-      <table class="option-control-table">
-        <tr>
-          <td class="option-name" i18n-content="sensitivity"></td>
-          <td class="option-value">
+      <div class="option-control-table">
+        <span class="option-name" i18n-content="sensitivity"></span>
+	<div id="touchpad-value">
+          <div id="slider-control">
             <input id="sensitivity-range" type="range" min="1" max="5"
                 pref="settings.touchpad.sensitivity2" class="touch-slider">
-          </td>
-        </tr>
-        <tr>
-          <td></td>
-          <td>
-            <span i18n-content="sensitivity_less"></span>
-            <span i18n-content="sensitivity_more"
-                class="touchpad-sensitivity-more"></span>
-          </td>
-        </tr>
-        <tr>
-          <td class="option-name" colspan="2">
-            <div class="checkbox">
-              <label>
-                <input id="tap-to-click-check"
-                    pref="settings.touchpad.enable_tap_to_click"
-                    type="checkbox">
-                <span i18n-content="enable_tap_to_click"></span>
-              </label>
+            <div>
+              <span i18n-content="sensitivity_less"></span>
+              <span i18n-content="sensitivity_more"
+                  class="touchpad-sensitivity-more"></span>
             </div>
-          </td>
-        </tr>
-      </table>
+          </div>
+        </div>
+        <div class="checkbox">
+          <label>
+            <input id="tap-to-click-check"
+                pref="settings.touchpad.enable_tap_to_click"
+                type="checkbox">
+            <span i18n-content="enable_tap_to_click"></span>
+          </label>
+        </div>
+      </div>  
     </section>
     <section>
       <h3 i18n-content="language"></h3>
-      <table class="option-control-table">
-        <tr>
-          <td class="option-name">
-            <button id="language-button" i18n-content="language_customize">
-            </button>
-          </td>
-           <td class="option-name">
-             <button id="modifier-keys-button"
-                 i18n-content="modifier_keys_customize"></button>
-           </td>
-        </tr>
-      </table>
+      <div class="option-control-table">
+        <div class="option-name">
+          <button id="language-button" i18n-content="language_customize">
+          </button>
+        </div>
+        <div class="option-name">
+          <button id="modifier-keys-button"
+              i18n-content="modifier_keys_customize"></button>
+         </div>
+      </div>
     </section>
     <section>
       <h3 i18n-content="accessibility_title"></h3>
-      <table class="option-control-table">
-        <tr>
-          <td class="option-name">
-            <div class="checkbox">
-              <label>
-                <input id="accesibility-check" type="checkbox">
-                <span i18n-content="accessibility"></span>
-              </label>
-            </div>
-          </td>
-        </tr>
-      </table>
+      <div class="option-control-table">
+        <div class="option-name">
+          <div class="checkbox">
+            <label>
+              <input id="accesibility-check" type="checkbox">
+              <span i18n-content="accessibility"></span>
+            </label>
+          </div>
+        </div>
+      </div>
     </section>
   </div>
 </div>

chrome/browser/resources/options/chromeos/system_options_page.css

 .touchpad-sensitivity-more {
   float: right;
 }
+
+html[dir=rtl] .touchpad-sensitivity-more {
+  float: left;
+}
+
+.option-name {
+   display: inline;
+}
+
+#timezone-value {
+   display: inline-block;
+   vertical-align: baseline;
+}
+
+#touchpad-value,
+#slider-control {
+   display: inline-block;
+   vertical-align: top;
+}