Layout adjustment for i18n compatibility.

chrome/browser/resources/options/options_page.css

 body {
   cursor: default;
   font-size: 13px;
 }
 
 a:link {
   color: rgb(63, 110, 194);
 }
 
 a:active {
@@ skipping 335 matching lines @@
   font-size: 105%;
   font-weight: bold;
   padding: 10px 15px 8px 15px;
 }
 
 .page list {
   /* Min height is a multiple of the list item height (32) */
   min-height: 192px;
 }
 
+

[Rick Byers, 2011/06/04 18:49:45]

Remove extra blank line

+/**
+ * TODO(kevers): Standardize formatting of sections to use display tables.
+ * For now, we require separate specialized rules for sections that are 
+ * formatted as table rows. 
+ */
 section {
   -webkit-box-orient: horizontal;
   border-bottom: 1px solid #eeeeee;
   display: -webkit-box;
   margin-top: 17px;
   padding-bottom: 20px;
 }
 

[Rick Byers, 2011/06/04 18:49:45]

Remove extra blank line

+
 div.page section:last-child {
   border-bottom: none;
 }
 
 div.page > h3 {
   font-size: 105%;
   font-weight: bold;
   margin: 20px 0 10px 0;
 }
 
@@ skipping 396 matching lines @@
 
 html:not([hasFlashPlugin]) .flash-plugin-area,
 /* If the Flash plug-in supports the NPP_ClearSiteData API, we don't need to
  * show the link to the Flash storage settings manager:
  */
 html[flashPluginSupportsClearSiteData] .flash-plugin-area,
 html:not([flashPluginSupportsClearSiteData]) .clear-plugin-lso-data-enabled,
 html[flashPluginSupportsClearSiteData] .clear-plugin-lso-data-disabled {
   display: none;
 }
+
+
+/* Display a collection of sections as a table in order to display nicely
+ * in multiple locales.  The left column should expand to accomodate the
+ * widest label without introducing excessive whitespace.  Labels in
+ * languages such as German or Dutch tend to be wider than for English 

[Rick Byers, 2011/06/04 18:49:45]

Remove trailing whitespace

+ */
+.displaytable {
+  display: table;
+  width: 100%;
+}
+
+.displaytable > section {
+  display: table-row;
+}
+
+/* left table column containing section label */
+.displaytable > section > h3 {
+  display: table-cell;
+  vertical-align: baseline;
+  font-size: 105%;
+  font-weight: bold;

[Rick Byers, 2011/06/04 18:49:45]

font-size and font-weight appear redundant with the 'section > h3' rule.  Can
you remove them so that this rule specifies only the additional changes
necessary for the table case?

+  width: 130px;
+  padding-right: 10px;
+  border-bottom: 1px solid #eeeeee;
+}
+
+/* right table column containing settable options */
+.displaytable > section > h3 + div,
+.displaytable > section > h3 + table {
+  display: table-cell;

[Rick Byers, 2011/06/04 18:49:45]

You can combine all the table-cell rules (both left and right columns) together
as well to avoid repetition, eg:
.displaytable > section > * {
  display: table-cell;
  vertical-align: baseline;
}

+  vertical-align: baseline;
+  padding-top: 17px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid #eeeeee;
+}
+
+/* do not display a border after the last section in the table */
+.displaytable > section:last-child > h3,
+.displaytable > section:last-child > div  {
+  border-bottom: none;
+}