#925350 by reglogge, Jacine, Jeff Burnz: Fixed Vertical tabs markup to restore RTL support and fix other bugs.

2 files changed, 39 insertions, 31 deletions

diff --git a/misc/vertical-tabs-rtl.css b/misc/vertical-tabs-rtl.css
index b9fd4b3f9..4598c90fd 100644
--- a/misc/vertical-tabs-rtl.css
+++ b/misc/vertical-tabs-rtl.css
@@ -1,15 +1,15 @@
 /* $Id$ */
 
-.vertical-tabs {
+div.vertical-tabs {
   margin-left: 0;
   margin-right: 15em;
 }
-.vertical-tabs-list {
+.vertical-tabs ul.vertical-tabs-list {
+  margin-left: 0;
   margin-right: -15em;
-  right: 0;
   float: right;
 }
-.vertical-tabs-list li.selected {
+.vertical-tabs ul.vertical-tabs-list li.selected {
   border-left-width: 0;
   border-right-width: 1px;
 }
diff --git a/misc/vertical-tabs.css b/misc/vertical-tabs.css
index be18d0874..ba5db772d 100644
--- a/misc/vertical-tabs.css
+++ b/misc/vertical-tabs.css
@@ -1,70 +1,78 @@
 /* $Id$ */
 
 div.vertical-tabs {
-  margin: 1em 0 1em 15em;
+  margin: 1em 0 1em 15em; /* LTR */
   border: 1px solid #ccc;
+  position: relative; /* IE6/7 */
 }
-div.vertical-tabs ul.vertical-tabs-list {
+.vertical-tabs ul.vertical-tabs-list {
   width: 15em;
   list-style: none;
   list-style-image: none; /* IE6 */
   border-top: 1px solid #ccc;
   padding: 0;
   position: relative; /* IE6 */
-  margin: -1px -100% -1px 0;
-  left: -15em;
-  float: left;
+  margin: -1px 0 -1px -15em; /* LTR */
+  float: left; /* LTR */
 }
-div.vertical-tabs .vertical-tabs-panes fieldset.vertical-tabs-pane {
+.vertical-tabs fieldset.vertical-tabs-pane {
   margin: 0 !important;
   padding: 0 1em;
   border: 0;
 }
-div.vertical-tabs .vertical-tabs-panes fieldset.vertical-tabs-pane legend {
+.vertical-tabs legend {
   display: none;
 }
 
 /* Layout of each tab */
-div.vertical-tabs ul.vertical-tabs-list li {
+.vertical-tabs ul.vertical-tabs-list li {
   background: #eee;
   border: 1px solid #ccc;
   border-top: 0;
   padding: 0;
   margin: 0;
-  height: 1%;
+  min-width: 0; /* IE7 */
 }
-div.vertical-tabs ul.vertical-tabs-list li a {
+.vertical-tabs ul.vertical-tabs-list li a {
   display: block;
   text-decoration: none;
   padding: 0.5em 0.6em;
-  line-height: 1.3em;
-  height: 1%;
 }
-div.vertical-tabs ul.vertical-tabs-list li a:focus strong,
-div.vertical-tabs ul.vertical-tabs-list li a:active strong,
-div.vertical-tabs ul.vertical-tabs-list li a:hover strong {
+.vertical-tabs ul.vertical-tabs-list li a:focus strong,
+.vertical-tabs ul.vertical-tabs-list li a:active strong,
+.vertical-tabs ul.vertical-tabs-list li a:hover strong {
   text-decoration: underline;
 }
-div.vertical-tabs ul.vertical-tabs-list li a:focus,
-div.vertical-tabs ul.vertical-tabs-list li a:active {
-  position: relative;
-  z-index: 5;
-}
-div.vertical-tabs ul.vertical-tabs-list li a:hover {
+.vertical-tabs ul.vertical-tabs-list li a:hover {
   outline: 1px dotted;
 }
-div.vertical-tabs ul.vertical-tabs-list li.selected {
+.vertical-tabs ul.vertical-tabs-list li.selected {
   background-color: #fff;
-  border-right-width: 0;
-  position: relative;
+  border-right-width: 0; /* LTR */
 }
-div.vertical-tabs ul.vertical-tabs-list span.selected strong {
+.vertical-tabs ul.vertical-tabs-list .selected strong {
   color: #000;
 }
-div.vertical-tabs ul.vertical-tabs-list .summary {
+.vertical-tabs ul.vertical-tabs-list .summary {
   display: block;
 }
-div.vertical-tabs ul.vertical-tabs ul.vertical-tabs-list .summary {
+.vertical-tabs ul.vertical-tabs ul.vertical-tabs-list .summary {
   line-height: normal;
   margin-bottom: 0;
 }
+
+/**
+ * Prevent text inputs from overflowing when container is too narrow. "width" is
+ * applied to override hardcoded cols or size attributes and used in conjunction
+ * with "box-sizing" to prevent box model issues from occurring in most browsers.
+*/
+.vertical-tabs .form-type-textfield input {
+  width: 100%;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+* html .vertical-tabs .form-type-textfield,
+* html .vertical-tabs .form-textarea-wrapper {
+  width: 95%; /* IE6 */
+}