- Patch #676800 by casey, sun, james.elliott, cosmicdreams, seutje, Jacine: made fieldsets work on all browser.

4 files changed, 52 insertions, 65 deletions

diff --git a/themes/seven/ie6.css b/themes/seven/ie6.css
index d4df28084..fb4d2e56a 100644
--- a/themes/seven/ie6.css
+++ b/themes/seven/ie6.css
@@ -4,6 +4,7 @@ ul.menu li,
 ul.menu li a,
 ul.links li,
 ul.links li a,
+.action-links,
 #page {
   height: 1%;
 }
diff --git a/themes/seven/reset.css b/themes/seven/reset.css
index a0a5ea7cd..9ad87c21c 100644
--- a/themes/seven/reset.css
+++ b/themes/seven/reset.css
@@ -214,7 +214,6 @@ body {
  * to sneak the clearfix class into Drupal's markup.
  * From http://www.positioniseverything.net/easyclearing.html
  */
-div.form-item:after,
 ul.links:after,
 div.admin-panel .body:after,
 .clearfix:after {
@@ -232,7 +231,7 @@ ul.inline:after {
   clear: none;
 }
 
-div.form-item,
+.form-item,
 ul.links,
 div.admin-panel .body,
 .clearfix {
@@ -240,14 +239,14 @@ div.admin-panel .body,
 }
 
 /* Hides from IE-mac \*/
-* html div.form-item,
+* html .form-item,
 * html ul.links,
 * html div.admin-panel .body,
 * html .clearfix {
   height: 1%;
 }
 
-div.form-item,
+.form-item,
 ul.links,
 div.admin-panel .body,
 .clearfix {
diff --git a/themes/seven/style.css b/themes/seven/style.css
index a09f043f4..38839c6bd 100644
--- a/themes/seven/style.css
+++ b/themes/seven/style.css
@@ -603,88 +603,100 @@ table tr.selected td {
 }
 
 /**
- * Forms.
+ * Fieldsets.
+ *
+ * Fieldset legends are displayed like containers in Seven. However, several
+ * browsers do not support styling of LEGEND elements. To achieve the desired
+ * styling:
+ * - All fieldsets use 'position: relative'.
+ * - All legend labels are wrapped in a single span.fieldset-legend that uses
+ *   'position: absolute', which means that the LEGEND element itself is not
+ *   rendered by browsers.
+ * - Due to using 'position: absolute', collapsed fieldsets do not have a
+ *   height; the fieldset requires a 'padding-top' to make the absolute
+ *   positioned .fieldset-legend appear as though it would have a height.
+ * - Various browsers are positioning the legend differently if there is a
+ *   'padding-left'/'padding-right' applied on a fieldset and inherit the
+ *   positioning even to absolute positioned elements within; we therefore have
+ *   to apply all padding to the inner .fieldset-wrapper instead.
  */
 
-/* Fieldsets & Form items */
 fieldset {
   border: 1px solid #ccc;
-  padding: 30px 13px 13px 14px;
-  margin: 0 0 10px;
+  padding: 2.5em 0 0 0;
+  position: relative;
+  margin: 1em 0;
 }
 
-fieldset legend span,
-fieldset legend a {
+fieldset .fieldset-legend {
+  margin-top: 0.5em;
+  padding-left: 15px;
   position: absolute;
-  margin-top: 9px;
+  text-transform: uppercase;
 }
 
-fieldset legend a span {
-  position: relative;
-  margin-top: 0;
+fieldset .fieldset-wrapper {
+  padding: 0 13px 13px 15px;
 }
 
 fieldset.collapsed {
-  background: transparent;
+  background-color: transparent;
 }
 
-html.js fieldset.collapsed legend,
-html.js fieldset.collapsed legend * {
-  display: block;
-}
 html.js fieldset.collapsed {
   border-width: 1px;
+  height: auto;
   margin-bottom: 10px;
-  padding: 13px;
 }
 
 fieldset fieldset {
-  background: #fff;
+  background-color: #fff;
 }
 
 fieldset fieldset fieldset {
-  background: #f8f8f8;
+  background-color: #f8f8f8;
 }
 
 html.js fieldset.collapsible .fieldset-wrapper {
   overflow: visible;
 }
 
-div.form-item {
+/**
+ * Form elements.
+ */
+
+.form-item {
   padding: 9px 0;
   margin: 0 0 10px;
 }
 
-.filter-wrapper div.form-item,
-div.teaser-checkbox div.form-item,
-div.form-item div.form-item,
-fieldset div.form-item {
+.filter-wrapper .form-item,
+div.teaser-checkbox .form-item,
+.form-item .form-item {
   padding: 5px 0;
   margin: 0;
   border: 0;
 }
-
+.form-type-checkbox {
+  padding: 0;
+}
 .text-format-wrapper .form-item {
   padding-bottom: 0;
 }
 
-div.form-item label {
+.form-item label {
   margin: 0;
   padding: 0;
 }
 
-fieldset legend {
-  text-transform: uppercase;
-}
-
-div.form-item label.option {
+.form-item label.option {
   text-transform: none;
 }
 
-div.form-item label.option {
+.form-item label.option {
   font-size: 12px;
 }
-div.form-item label.option input {
+.form-item label.option input {
   vertical-align: middle;
 }
 
@@ -700,7 +712,7 @@ div.form-item label.option input {
   padding-left: 6px;
 }
 
-.filter-wrapper div.form-item,
+.filter-wrapper .form-item,
 .filter-wrapper .filter-guidelines,
 .filter-wrapper .filter-help {
   font-size: 12px;
@@ -709,7 +721,7 @@ div.form-item label.option input {
 
 ul.tips,
 div.description,
-div.form-item div.description {
+.form-item div.description {
   margin: 5px 0;
   line-height: 15px;
   font-size: 12px;
@@ -856,10 +868,6 @@ div.admin-panel h3 {
   padding-bottom: 9px;
 }
 
-.container-inline fieldset {
-  display: block;
-}
-
 /* admin/appearance */
 #system-themes-page h2 {
   font-weight: normal;
diff --git a/themes/seven/template.php b/themes/seven/template.php
index 66ad3feeb..88a67a09d 100644
--- a/themes/seven/template.php
+++ b/themes/seven/template.php
@@ -5,6 +5,8 @@
  * Override or insert variables into the html template.
  */
 function seven_preprocess_html(&$vars) {
+  // Add conditional CSS for IE8 and below.
+  drupal_add_css(path_to_theme() . '/ie.css', array('weight' => CSS_THEME, 'browsers' => array('IE' => 'lte IE 8', '!IE' => FALSE), 'preprocess' => FALSE));
   // Add conditional CSS for IE6.
   drupal_add_css(path_to_theme() . '/ie6.css', array('weight' => CSS_THEME, 'browsers' => array('IE' => 'lt IE 7', '!IE' => FALSE), 'preprocess' => FALSE));
 }
@@ -76,29 +78,6 @@ function seven_tablesort_indicator($variables) {
 }
 
 /**
- * Override of theme_fieldset().
- *
- * Add span to legend tag, so we can style it to be inside the fieldset.
- */
-function seven_fieldset($variables) {
-  $element = $variables['element'];
-
-  $output = '<fieldset' . drupal_attributes($element['#attributes']) . '>';
-  if (!empty($element['#title'])) {
-    $output .= '<legend><span>' . $element['#title'] . '</span></legend>';
-  }
-  if (!empty($element['#description'])) {
-    $output .= '<div class="fieldset-description">' . $element['#description'] . '</div>';
-  }
-  $output .= $element['#children'];
-  if (isset($element['#value'])) {
-    $output .= $element['#value'];
-  }
-  $output .= "</fieldset>\n";
-  return $output;
-}
-
-/**
  * Implements hook_css_alter().
  */
 function seven_css_alter(&$css) {