]> source.dussan.org Git - vaadin-framework.git/commitdiff
Multiple small fixes for themes, mainly reindeer (black buttons now work in IE as...
authorJouni Koivuviita <jouni.koivuviita@itmill.com>
Fri, 22 May 2009 09:13:52 +0000 (09:13 +0000)
committerJouni Koivuviita <jouni.koivuviita@itmill.com>
Fri, 22 May 2009 09:13:52 +0000 (09:13 +0000)
svn changeset:7953/svn branch:6.0

WebContent/VAADIN/themes/base/splitpanel/splitpanel.css
WebContent/VAADIN/themes/base/styles.css
WebContent/VAADIN/themes/reindeer/button/button.css
WebContent/VAADIN/themes/reindeer/label/label.css
WebContent/VAADIN/themes/reindeer/select/select.css
WebContent/VAADIN/themes/reindeer/splitpanel/splitpanel.css
WebContent/VAADIN/themes/reindeer/styles.css
WebContent/VAADIN/themes/reindeer/textfield/textfield.css
WebContent/VAADIN/themes/runo/styles.css

index 2e8df90a631c4571270b41f9b0a0d814659c166d..68bb5c65393780c1a7059c2514459630408a6dd2 100644 (file)
@@ -2,11 +2,11 @@
 .v-splitpanel-vertical {
        overflow: hidden;
 }
-.v-splitpanel-horizontal .v-splitpanel-hsplitter {
+.v-splitpanel-hsplitter {
        width: 6px;
        font-size: 1px; /* for IE6 */
 }
-.v-splitpanel-horizontal .v-splitpanel-hsplitter div {
+.v-splitpanel-hsplitter div {
        width: 6px;
        font-size: 1px; /* for IE6 */
        position: absolute;
        background: #ddd;
        cursor: e-resize;
 }
-.v-splitpanel-vertical .v-splitpanel-vsplitter {
+.v-splitpanel-vsplitter {
        height: 6px;
        font-size: 1px; /* for IE6 */
 }
-.v-splitpanel-vertical .v-splitpanel-vsplitter div {
+.v-splitpanel-vsplitter div {
        height: 6px;
        font-size: 1px; /* for IE6 */
        background: #ddd;
        cursor: n-resize;
 }
 /* IE specific styles */
-.v-ie6 .v-splitpanel-horizontal .v-splitpanel-hsplitter div {
+.v-ie6 .v-splitpanel-hsplitter div {
        height: 99%;
 }
-
 .v-ie6 .v-splitpanel-first-container,
 .v-ie6 .v-splitpanel-second-container,
 .v-ie7 .v-splitpanel-first-container,
 .v-ie7 .v-splitpanel-second-container {
-       position:relative;
+       position: relative;
 }
\ No newline at end of file
index 28e9f5a996746870e57c1159faad95377f4a25c4..f034ea5801fa8b5ce7259c7d7aaff52c51e95e2c 100644 (file)
 .v-splitpanel-vertical {
        overflow: hidden;
 }
-.v-splitpanel-horizontal .v-splitpanel-hsplitter {
+.v-splitpanel-hsplitter {
        width: 6px;
        font-size: 1px; /* for IE6 */
 }
-.v-splitpanel-horizontal .v-splitpanel-hsplitter div {
+.v-splitpanel-hsplitter div {
        width: 6px;
        font-size: 1px; /* for IE6 */
        position: absolute;
        background: #ddd;
        cursor: e-resize;
 }
-.v-splitpanel-vertical .v-splitpanel-vsplitter {
+.v-splitpanel-vsplitter {
        height: 6px;
        font-size: 1px; /* for IE6 */
 }
-.v-splitpanel-vertical .v-splitpanel-vsplitter div {
+.v-splitpanel-vsplitter div {
        height: 6px;
        font-size: 1px; /* for IE6 */
        background: #ddd;
        cursor: n-resize;
 }
 /* IE specific styles */
-.v-ie6 .v-splitpanel-horizontal .v-splitpanel-hsplitter div {
+.v-ie6 .v-splitpanel-hsplitter div {
        height: 99%;
 }
-
 .v-ie6 .v-splitpanel-first-container,
 .v-ie6 .v-splitpanel-second-container,
 .v-ie7 .v-splitpanel-first-container,
 .v-ie7 .v-splitpanel-second-container {
-       position:relative;
+       position: relative;
 }
 
 /* ./WebContent/VAADIN/themes/base/table/table.css */
index 6dd0681ff91fb9101780df831ab342fa08051281..949ad1b454a7345a81cdb621abec6df79399c7f0 100644 (file)
@@ -213,15 +213,14 @@ div > .v-button-small .v-button-caption,
 * Black buttons
 *------------*/
 .black div > .v-button,
-.black .v-ie7 .v-button {
+.v-ie7 .black .v-button {
        background-image: url(img/black/left.png); /** sprite-ref: black-buttons */
 }
 .black div > .v-button .v-button-caption,
-.black .v-ie7 .v-button .v-button-caption {
+.v-ie7 .black .v-button .v-button-caption {
        background-image: url(img/black/right.png); /** sprite-ref: black-buttons; sprite-alignment: right */
        color: #c9ccce;
        text-shadow: #000 0 1px 0;
-       font-weight: normal;
 }
 .black .v-button:focus {
        background-image: url(img/black/left-focus.png); /** sprite-ref: black-buttons */
@@ -230,11 +229,11 @@ div > .v-button-small .v-button-caption,
        background-image: url(img/black/right-focus.png); /** sprite-ref: black-buttons; sprite-alignment: right */
 }
 .black .v-button:active,
-.black .v-ie7 .v-button.v-pressed {
+.v-ie7 .black .v-button.v-pressed {
        background-image: url(img/black/left-pressed.png); /** sprite-ref: black-buttons */
 }
 .black .v-button:active .v-button-caption,
-.black .v-ie7 .v-button.v-pressed .v-button-caption {
+.v-ie7 .black .v-button.v-pressed .v-button-caption {
        background-image: url(img/black/right-pressed.png); /** sprite-ref: black-buttons; sprite-alignment: right */
 }
 
@@ -242,11 +241,11 @@ div > .v-button-small .v-button-caption,
  * Primary-style ----------------------------
  */
 .black div > .v-button-primary,
-.black .v-ie7 .v-button-primary {
+.v-ie7 .black .v-button-primary {
        background-image: url(img/black/primary-left.png); /** sprite-ref: black-buttons */
 }
 .black div > .v-button-primary .v-button-caption,
-.black .v-ie7 .v-button-primary .v-button-caption {
+.v-ie7 .black .v-button-primary .v-button-caption {
        background-image: url(img/black/primary-right.png); /** sprite-ref: black-buttons; sprite-alignment: right */
        text-shadow: #26282a 0 1px 0;
 }
@@ -258,11 +257,11 @@ div > .v-button-small .v-button-caption,
        color: #eaf4fb;
 }
 .black .v-button-primary:active,
-.black .v-ie7 .v-button-primary.v-pressed {
+.v-ie7 .black .v-button-primary.v-pressed {
        background-image: url(img/black/primary-left-pressed.png); /** sprite-ref: black-buttons */
 }
 .black .v-button-primary:active .v-button-caption,
-.black .v-ie7 .v-button-primary.v-pressed .v-button-caption {
+.v-ie7 .black .v-button-primary.v-pressed .v-button-caption {
        background-image: url(img/black/primary-right-pressed.png); /** sprite-ref: black-buttons; sprite-alignment: right */
 }
 
@@ -270,11 +269,11 @@ div > .v-button-small .v-button-caption,
  * Small-style --------------------------
  */
 .black div > .v-button-small,
-.black .v-ie7 .v-button-small {
+.v-ie7 .black .v-button-small {
        background-image: url(img/black/small-left.png); /** sprite-ref: black-buttons */
 }
 .black div > .v-button-small .v-button-caption,
-.black .v-ie7 .v-button-small .v-button-caption {
+.v-ie7 .black .v-button-small .v-button-caption {
        background-image: url(img/black/small-right.png); /** sprite-ref: black-buttons; sprite-alignment: right */
        text-shadow: #000 0 -1px 0;
 }
@@ -285,11 +284,11 @@ div > .v-button-small .v-button-caption,
        background-image: url(img/black/small-right-focus.png); /** sprite-ref: black-buttons; sprite-alignment: right */
 }
 .black .v-button-small:active,
-.black .v-ie7 .v-button-small.v-pressed {
+.v-ie7 .black .v-button-small.v-pressed {
        background-image: url(img/black/small-left-pressed.png); /** sprite-ref: black-buttons */
 }
 .black .v-button-small:active .v-button-caption,
-.black .v-ie7 .v-button-small.v-pressed .v-button-caption {
+.v-ie7 .black .v-button-small.v-pressed .v-button-caption {
        background-image: url(img/black/small-right-pressed.png); /** sprite-ref: black-buttons; sprite-alignment: right */
 }
 
@@ -346,6 +345,7 @@ div > .v-button.v-button-link:active .v-button-caption,
        line-height: 16px;
        height: 16px;
        outline: none;
+       cursor: default;
 }
 .v-ie6 .v-button-primary {
        background-image: url(img/primary-right.png);
@@ -366,6 +366,22 @@ div > .v-button.v-button-link:active .v-button-caption,
        border-top-color: #83939b;
        border-bottom-color: #888d91;
 }
+/* Buttons on black background */
+.v-ie6 .black .v-button {
+       border: 1px solid #505354;
+       border-bottom-color: #313435;
+       background: #202224 url(img/black/right.png) no-repeat 0 -1px;
+       color: #c9ccce;
+}
+.v-ie6 .black .v-button-primary {
+       background-image: url(img/black/primary-right.png);
+}
+.v-ie6 .black .v-button-small {
+       background-image: url(img/black/small-right.png);
+}
+.v-ie6 .black .v-button.v-pressed {
+       background-image: url(img/black/right-pressed.png);
+}
 /* Link button in IE6 */
 .v-ie6 .v-button-link {
        border: none;
index 7070bf04f4686baf16987e6eaeb4bbaa24b7f3f3..d8bea5cbe74426f41211ddc66b401cb882f44fd4 100644 (file)
        font-weight: bold;
        color: #44698b;
 }
-.v-ie6 .v-label-h1 {
-       font-size: 1px;
-       line-height: normal;
-}
 .v-label-h2,
 .v-caption-h2 {
        font-size: 16px;
        font-size: 11px;
        line-height: 13px;
        color: #707070;
+}
+
+.blue .v-label-h1,
+.blue .v-label-h2,
+.blue .v-caption-h1,
+.blue .v-caption-h2 {
+       color: #fff;
+       text-shadow: rgba(0,0,0,.3) 0 1px 1px;
+}
+
+.black .v-label-h1,
+.black .v-label-h2,
+.black .v-caption-h1,
+.black .v-caption-h2 {
+       color: #fff;
+       text-shadow: rgba(0,0,0,.8) 0 2px 2px;
 }
\ No newline at end of file
index a7f8b6503b3fae9627b91bdc3d27cf91d71db229..93e3c31e6eceda7dadadf2c46a1f2e3b31e286b0 100644 (file)
 .v-filterselect .v-icon + .v-filterselect-input {
        margin-left: -16px;
        padding-left: 18px;
+}
+
+
+
+/* Twincolselect needs a little tweak in IE6 */
+.v-ie6 .v-select-twincol-buttons {
+       overflow: hidden;
 }
\ No newline at end of file
index dbb7ae0aefdd21b9bcda2e179846b86f8ea2a79e..6067116581bfb4d5018495ce5cf29080217deea8 100644 (file)
@@ -1,21 +1,23 @@
-.v-splitpanel-horizontal .v-splitpanel-hsplitter {
+.v-splitpanel-hsplitter,
+.v-splitpanel-hsplitter-locked {
        width: 7px;
        background-repeat: repeat-y;
        background-image: url(img/hor-bg.png); /** sprite-ref: horizontals; sprite-alignment: repeat */
 }
-.v-splitpanel-horizontal .v-splitpanel-hsplitter div {
+.v-splitpanel-hsplitter div {
        width: 7px;
        background: transparent;
        background-repeat: no-repeat;
        background-position: 50%;
        background-image: url(img/hor-handle.png); /** sprite-ref: horizontals; sprite-alignment: center */
 }
-.v-splitpanel-vertical .v-splitpanel-vsplitter {
+.v-splitpanel-vsplitter,
+.v-splitpanel-vsplitter-locked {
        height: 7px;
        background-repeat: repeat-x;
        background-image: url(img/ver-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
 }
-.v-splitpanel-vertical .v-splitpanel-vsplitter div {
+.v-splitpanel-vsplitter div {
        height: 7px;
        background: transparent;
        background-repeat: no-repeat;
index 2b1808236b081d13bae930a8a2b13b987453e9cb..3ab314bac2c0ef89919f101eaf5ae002db9bd0c7 100644 (file)
 .v-splitpanel-vertical {
        overflow: hidden;
 }
-.v-splitpanel-horizontal .v-splitpanel-hsplitter {
+.v-splitpanel-hsplitter {
        width: 6px;
        font-size: 1px; /* for IE6 */
 }
-.v-splitpanel-horizontal .v-splitpanel-hsplitter div {
+.v-splitpanel-hsplitter div {
        width: 6px;
        font-size: 1px; /* for IE6 */
        position: absolute;
        background: #ddd;
        cursor: e-resize;
 }
-.v-splitpanel-vertical .v-splitpanel-vsplitter {
+.v-splitpanel-vsplitter {
        height: 6px;
        font-size: 1px; /* for IE6 */
 }
-.v-splitpanel-vertical .v-splitpanel-vsplitter div {
+.v-splitpanel-vsplitter div {
        height: 6px;
        font-size: 1px; /* for IE6 */
        background: #ddd;
        cursor: n-resize;
 }
 /* IE specific styles */
-.v-ie6 .v-splitpanel-horizontal .v-splitpanel-hsplitter div {
+.v-ie6 .v-splitpanel-hsplitter div {
        height: 99%;
 }
-
 .v-ie6 .v-splitpanel-first-container,
 .v-ie6 .v-splitpanel-second-container,
 .v-ie7 .v-splitpanel-first-container,
 .v-ie7 .v-splitpanel-second-container {
-       position:relative;
+       position: relative;
 }
 
 /* ./WebContent/VAADIN/themes/base/table/table.css */
@@ -1874,19 +1873,18 @@ div > .v-button-small .v-button-caption,
 * Black buttons
 *------------*/
 .black div > .v-button,
-.black .v-ie7 .v-button {
+.v-ie7 .black .v-button {
   background-image: url(button/img/black-button-sprites.png);
   -background-image: url(button/img/black-button-sprites-ie6.png);
   background-position: left -0px;
 }
 .black div > .v-button .v-button-caption,
-.black .v-ie7 .v-button .v-button-caption {
+.v-ie7 .black .v-button .v-button-caption {
   background-image: url(button/img/black-button-sprites.png);
   -background-image: url(button/img/black-button-sprites-ie6.png);
   background-position: right -26px;
        color: #c9ccce;
        text-shadow: #000 0 1px 0;
-       font-weight: normal;
 }
 .black .v-button:focus {
   background-image: url(button/img/black-button-sprites.png);
@@ -1899,13 +1897,13 @@ div > .v-button-small .v-button-caption,
   background-position: right -78px;
 }
 .black .v-button:active,
-.black .v-ie7 .v-button.v-pressed {
+.v-ie7 .black .v-button.v-pressed {
   background-image: url(button/img/black-button-sprites.png);
   -background-image: url(button/img/black-button-sprites-ie6.png);
   background-position: left -104px;
 }
 .black .v-button:active .v-button-caption,
-.black .v-ie7 .v-button.v-pressed .v-button-caption {
+.v-ie7 .black .v-button.v-pressed .v-button-caption {
   background-image: url(button/img/black-button-sprites.png);
   -background-image: url(button/img/black-button-sprites-ie6.png);
   background-position: right -130px;
@@ -1915,13 +1913,13 @@ div > .v-button-small .v-button-caption,
  * Primary-style ----------------------------
  */
 .black div > .v-button-primary,
-.black .v-ie7 .v-button-primary {
+.v-ie7 .black .v-button-primary {
   background-image: url(button/img/black-button-sprites.png);
   -background-image: url(button/img/black-button-sprites-ie6.png);
   background-position: left -156px;
 }
 .black div > .v-button-primary .v-button-caption,
-.black .v-ie7 .v-button-primary .v-button-caption {
+.v-ie7 .black .v-button-primary .v-button-caption {
   background-image: url(button/img/black-button-sprites.png);
   -background-image: url(button/img/black-button-sprites-ie6.png);
   background-position: right -182px;
@@ -1939,13 +1937,13 @@ div > .v-button-small .v-button-caption,
        color: #eaf4fb;
 }
 .black .v-button-primary:active,
-.black .v-ie7 .v-button-primary.v-pressed {
+.v-ie7 .black .v-button-primary.v-pressed {
   background-image: url(button/img/black-button-sprites.png);
   -background-image: url(button/img/black-button-sprites-ie6.png);
   background-position: left -260px;
 }
 .black .v-button-primary:active .v-button-caption,
-.black .v-ie7 .v-button-primary.v-pressed .v-button-caption {
+.v-ie7 .black .v-button-primary.v-pressed .v-button-caption {
   background-image: url(button/img/black-button-sprites.png);
   -background-image: url(button/img/black-button-sprites-ie6.png);
   background-position: right -286px;
@@ -1955,13 +1953,13 @@ div > .v-button-small .v-button-caption,
  * Small-style --------------------------
  */
 .black div > .v-button-small,
-.black .v-ie7 .v-button-small {
+.v-ie7 .black .v-button-small {
   background-image: url(button/img/black-button-sprites.png);
   -background-image: url(button/img/black-button-sprites-ie6.png);
   background-position: left -312px;
 }
 .black div > .v-button-small .v-button-caption,
-.black .v-ie7 .v-button-small .v-button-caption {
+.v-ie7 .black .v-button-small .v-button-caption {
   background-image: url(button/img/black-button-sprites.png);
   -background-image: url(button/img/black-button-sprites-ie6.png);
   background-position: right -332px;
@@ -1978,13 +1976,13 @@ div > .v-button-small .v-button-caption,
   background-position: right -372px;
 }
 .black .v-button-small:active,
-.black .v-ie7 .v-button-small.v-pressed {
+.v-ie7 .black .v-button-small.v-pressed {
   background-image: url(button/img/black-button-sprites.png);
   -background-image: url(button/img/black-button-sprites-ie6.png);
   background-position: left -392px;
 }
 .black .v-button-small:active .v-button-caption,
-.black .v-ie7 .v-button-small.v-pressed .v-button-caption {
+.v-ie7 .black .v-button-small.v-pressed .v-button-caption {
   background-image: url(button/img/black-button-sprites.png);
   -background-image: url(button/img/black-button-sprites-ie6.png);
   background-position: right -412px;
@@ -2043,6 +2041,7 @@ div > .v-button.v-button-link:active .v-button-caption,
        line-height: 16px;
        height: 16px;
        outline: none;
+       cursor: default;
 }
 .v-ie6 .v-button-primary {
        background-image: url(button/img/primary-right.png);
@@ -2063,6 +2062,22 @@ div > .v-button.v-button-link:active .v-button-caption,
        border-top-color: #83939b;
        border-bottom-color: #888d91;
 }
+/* Buttons on black background */
+.v-ie6 .black .v-button {
+       border: 1px solid #505354;
+       border-bottom-color: #313435;
+       background: #202224 url(button/img/black/right.png) no-repeat 0 -1px;
+       color: #c9ccce;
+}
+.v-ie6 .black .v-button-primary {
+       background-image: url(button/img/black/primary-right.png);
+}
+.v-ie6 .black .v-button-small {
+       background-image: url(button/img/black/small-right.png);
+}
+.v-ie6 .black .v-button.v-pressed {
+       background-image: url(button/img/black/right-pressed.png);
+}
 /* Link button in IE6 */
 .v-ie6 .v-button-link {
        border: none;
@@ -2546,10 +2561,6 @@ td.v-datefield-calendarpanel-nextyear {
        font-weight: bold;
        color: #44698b;
 }
-.v-ie6 .v-label-h1 {
-       font-size: 1px;
-       line-height: normal;
-}
 .v-label-h2,
 .v-caption-h2 {
        font-size: 16px;
@@ -2561,6 +2572,22 @@ td.v-datefield-calendarpanel-nextyear {
        color: #707070;
 }
 
+.blue .v-label-h1,
+.blue .v-label-h2,
+.blue .v-caption-h1,
+.blue .v-caption-h2 {
+       color: #fff;
+       text-shadow: rgba(0,0,0,.3) 0 1px 1px;
+}
+
+.black .v-label-h1,
+.black .v-label-h2,
+.black .v-caption-h1,
+.black .v-caption-h2 {
+       color: #fff;
+       text-shadow: rgba(0,0,0,.8) 0 2px 2px;
+}
+
 /* ./WebContent/VAADIN/themes/reindeer/layouts/layouts.css */
 .v-orderedlayout-margin-top,
 .v-horizontallayout-margin-top,
@@ -2892,6 +2919,13 @@ td.v-datefield-calendarpanel-nextyear {
        padding-left: 18px;
 }
 
+
+
+/* Twincolselect needs a little tweak in IE6 */
+.v-ie6 .v-select-twincol-buttons {
+       overflow: hidden;
+}
+
 /* ./WebContent/VAADIN/themes/reindeer/slider/slider.css */
 .v-slider {
        border-top: 1px solid #9a9c9e;
@@ -2940,13 +2974,14 @@ td.v-datefield-calendarpanel-nextyear {
 }
 
 /* ./WebContent/VAADIN/themes/reindeer/splitpanel/splitpanel.css */
-.v-splitpanel-horizontal .v-splitpanel-hsplitter {
+.v-splitpanel-hsplitter,
+.v-splitpanel-hsplitter-locked {
        width: 7px;
        background-repeat: repeat-y;
   background-image: url(common/img/horizontal-sprites.png);
   background-position: -0px top;
 }
-.v-splitpanel-horizontal .v-splitpanel-hsplitter div {
+.v-splitpanel-hsplitter div {
        width: 7px;
        background: transparent;
        background-repeat: no-repeat;
@@ -2954,14 +2989,15 @@ td.v-datefield-calendarpanel-nextyear {
   background-image: url(common/img/horizontal-sprites.png);
   background-position: -7px center;
 }
-.v-splitpanel-vertical .v-splitpanel-vsplitter {
+.v-splitpanel-vsplitter,
+.v-splitpanel-vsplitter-locked {
        height: 7px;
        background-repeat: repeat-x;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
   background-position: left -791px;
 }
-.v-splitpanel-vertical .v-splitpanel-vsplitter div {
+.v-splitpanel-vsplitter div {
        height: 7px;
        background: transparent;
        background-repeat: no-repeat;
@@ -3358,6 +3394,9 @@ input.v-textfield-prompt {
        -moz-border-image: url(textfield/img/bg-border-image-black-focus.png) 0 3 0 3 stretch stretch;
        -o-border-image: url(textfield/img/bg-border-image-black-focus.png) 0 3 0 3 stretch stretch;
 }
+.black input.v-textfield-prompt {
+       color: #5f6366;
+}
 
 /* Readonly */
 input.v-textfield-readonly,
index 624c7a4dcc865c966a59ef63e6b710f05223e4a9..cf42c645297816b30d67ef920932930e81d4b397 100644 (file)
@@ -101,6 +101,9 @@ input.v-textfield-prompt {
        -moz-border-image: url(img/bg-border-image-black-focus.png) 0 3 0 3 stretch stretch;
        -o-border-image: url(img/bg-border-image-black-focus.png) 0 3 0 3 stretch stretch;
 }
+.black input.v-textfield-prompt {
+       color: #5f6366;
+}
 
 /* Readonly */
 input.v-textfield-readonly,
index 6268d7f1bf9251cf6abdc9a4ab97fe4bd3ff37d1..5d6f3dce9a7eed0abe08caa30c44078c51c51570 100644 (file)
 .v-splitpanel-vertical {
        overflow: hidden;
 }
-.v-splitpanel-horizontal .v-splitpanel-hsplitter {
+.v-splitpanel-hsplitter {
        width: 6px;
        font-size: 1px; /* for IE6 */
 }
-.v-splitpanel-horizontal .v-splitpanel-hsplitter div {
+.v-splitpanel-hsplitter div {
        width: 6px;
        font-size: 1px; /* for IE6 */
        position: absolute;
        background: #ddd;
        cursor: e-resize;
 }
-.v-splitpanel-vertical .v-splitpanel-vsplitter {
+.v-splitpanel-vsplitter {
        height: 6px;
        font-size: 1px; /* for IE6 */
 }
-.v-splitpanel-vertical .v-splitpanel-vsplitter div {
+.v-splitpanel-vsplitter div {
        height: 6px;
        font-size: 1px; /* for IE6 */
        background: #ddd;
        cursor: n-resize;
 }
 /* IE specific styles */
-.v-ie6 .v-splitpanel-horizontal .v-splitpanel-hsplitter div {
+.v-ie6 .v-splitpanel-hsplitter div {
        height: 99%;
 }
-
 .v-ie6 .v-splitpanel-first-container,
 .v-ie6 .v-splitpanel-second-container,
 .v-ie7 .v-splitpanel-first-container,
 .v-ie7 .v-splitpanel-second-container {
-       position:relative;
+       position: relative;
 }
 
 /* ./WebContent/VAADIN/themes/base/table/table.css */