Fixes #3028: CheckBox captions wrap in IE

svn changeset:8652/svn branch:6.1

5 files changed, 25 insertions, 125 deletions

diff --git a/WebContent/VAADIN/themes/base/button/button.css b/WebContent/VAADIN/themes/base/button/button.css
index 4e5c032af0..9dbc5e8309 100644
--- a/WebContent/VAADIN/themes/base/button/button.css
+++ b/WebContent/VAADIN/themes/base/button/button.css
@@ -125,44 +125,19 @@
 

 .v-checkbox,

 .v-checkbox label,

-.v-checkbox input {

+.v-checkbox input,

+.v-checkbox .v-icon {

 	vertical-align: middle;

 	white-space: nowrap;

 }

-.v-checkbox img {

-	display: inline;

-	vertical-align: middle;

-	margin-right: 3px;

+.v-checkbox .v-icon {

+	margin: 0 2px;

 }

 .v-checkbox .v-errorindicator {

 	float: none;

 	display: inline;

-	padding-left: 1em;

-	background-position: left;

-}

-/* Error indicator on checkbox fix for IE6 */

-.v-ie6 .v-checkbox * {

-	float: left;

-	display: inline; /* In effect, does nothing, since float:left forces block-rendering, but will fix "double-float-margin-bug" */

-}

-.v-ie6 .v-checkbox .v-errorindicator {

-	background-position: right;

-	display: inline;

-	float: left;

-	padding-left: 0; 

-	padding-right: 0.4em;

-}

-/* Error indicator on checkbox fix for IE7 */

-.v-ie7 .v-checkbox *,

-.v-ie8 .v-checkbox * {

-	float: left;

-}

-.v-ie7 .v-checkbox .v-errorindicator,

-.v-ie8 .v-checkbox .v-errorindicator {

-	background-position: right;

-	float: left;

-	padding-left: 0;

-	padding-right: 0.7em;

+	display: inline-block;

+	zoom: 1;

 }

 

 

diff --git a/WebContent/VAADIN/themes/base/styles.css b/WebContent/VAADIN/themes/base/styles.css
index def4572a00..2a7f982948 100644
--- a/WebContent/VAADIN/themes/base/styles.css
+++ b/WebContent/VAADIN/themes/base/styles.css
@@ -159,44 +159,19 @@
 
 .v-checkbox,
 .v-checkbox label,
-.v-checkbox input {
+.v-checkbox input,
+.v-checkbox .v-icon {
 	vertical-align: middle;
 	white-space: nowrap;
 }
-.v-checkbox img {
-	display: inline;
-	vertical-align: middle;
-	margin-right: 3px;
+.v-checkbox .v-icon {
+	margin: 0 2px;
 }
 .v-checkbox .v-errorindicator {
 	float: none;
 	display: inline;
-	padding-left: 1em;
-	background-position: left;
-}
-/* Error indicator on checkbox fix for IE6 */
-.v-ie6 .v-checkbox * {
-	float: left;
-	display: inline; /* In effect, does nothing, since float:left forces block-rendering, but will fix "double-float-margin-bug" */
-}
-.v-ie6 .v-checkbox .v-errorindicator {
-	background-position: right;
-	display: inline;
-	float: left;
-	padding-left: 0; 
-	padding-right: 0.4em;
-}
-/* Error indicator on checkbox fix for IE7 */
-.v-ie7 .v-checkbox *,
-.v-ie8 .v-checkbox * {
-	float: left;
-}
-.v-ie7 .v-checkbox .v-errorindicator,
-.v-ie8 .v-checkbox .v-errorindicator {
-	background-position: right;
-	float: left;
-	padding-left: 0;
-	padding-right: 0.7em;
+	display: inline-block;
+	zoom: 1;
 }
 
 
diff --git a/WebContent/VAADIN/themes/reindeer/styles.css b/WebContent/VAADIN/themes/reindeer/styles.css
index 368b2808f8..0844706e39 100644
--- a/WebContent/VAADIN/themes/reindeer/styles.css
+++ b/WebContent/VAADIN/themes/reindeer/styles.css
@@ -159,44 +159,19 @@
 
 .v-checkbox,
 .v-checkbox label,
-.v-checkbox input {
+.v-checkbox input,
+.v-checkbox .v-icon {
 	vertical-align: middle;
 	white-space: nowrap;
 }
-.v-checkbox img {
-	display: inline;
-	vertical-align: middle;
-	margin-right: 3px;
+.v-checkbox .v-icon {
+	margin: 0 2px;
 }
 .v-checkbox .v-errorindicator {
 	float: none;
 	display: inline;
-	padding-left: 1em;
-	background-position: left;
-}
-/* Error indicator on checkbox fix for IE6 */
-.v-ie6 .v-checkbox * {
-	float: left;
-	display: inline; /* In effect, does nothing, since float:left forces block-rendering, but will fix "double-float-margin-bug" */
-}
-.v-ie6 .v-checkbox .v-errorindicator {
-	background-position: right;
-	display: inline;
-	float: left;
-	padding-left: 0; 
-	padding-right: 0.4em;
-}
-/* Error indicator on checkbox fix for IE7 */
-.v-ie7 .v-checkbox *,
-.v-ie8 .v-checkbox * {
-	float: left;
-}
-.v-ie7 .v-checkbox .v-errorindicator,
-.v-ie8 .v-checkbox .v-errorindicator {
-	background-position: right;
-	float: left;
-	padding-left: 0;
-	padding-right: 0.7em;
+	display: inline-block;
+	zoom: 1;
 }
 
 
diff --git a/WebContent/VAADIN/themes/runo/styles.css b/WebContent/VAADIN/themes/runo/styles.css
index 957913d450..fb1523b970 100644
--- a/WebContent/VAADIN/themes/runo/styles.css
+++ b/WebContent/VAADIN/themes/runo/styles.css
@@ -159,44 +159,19 @@
 
 .v-checkbox,
 .v-checkbox label,
-.v-checkbox input {
+.v-checkbox input,
+.v-checkbox .v-icon {
 	vertical-align: middle;
 	white-space: nowrap;
 }
-.v-checkbox img {
-	display: inline;
-	vertical-align: middle;
-	margin-right: 3px;
+.v-checkbox .v-icon {
+	margin: 0 2px;
 }
 .v-checkbox .v-errorindicator {
 	float: none;
 	display: inline;
-	padding-left: 1em;
-	background-position: left;
-}
-/* Error indicator on checkbox fix for IE6 */
-.v-ie6 .v-checkbox * {
-	float: left;
-	display: inline; /* In effect, does nothing, since float:left forces block-rendering, but will fix "double-float-margin-bug" */
-}
-.v-ie6 .v-checkbox .v-errorindicator {
-	background-position: right;
-	display: inline;
-	float: left;
-	padding-left: 0; 
-	padding-right: 0.4em;
-}
-/* Error indicator on checkbox fix for IE7 */
-.v-ie7 .v-checkbox *,
-.v-ie8 .v-checkbox * {
-	float: left;
-}
-.v-ie7 .v-checkbox .v-errorindicator,
-.v-ie8 .v-checkbox .v-errorindicator {
-	background-position: right;
-	float: left;
-	padding-left: 0;
-	padding-right: 0.7em;
+	display: inline-block;
+	zoom: 1;
 }
 
 
diff --git a/src/com/vaadin/terminal/gwt/client/ui/VCheckBox.java b/src/com/vaadin/terminal/gwt/client/ui/VCheckBox.java
index ec460d1e5e..3bd6f656f2 100644
--- a/src/com/vaadin/terminal/gwt/client/ui/VCheckBox.java
+++ b/src/com/vaadin/terminal/gwt/client/ui/VCheckBox.java
@@ -65,7 +65,7 @@ public class VCheckBox extends com.google.gwt.user.client.ui.CheckBox implements
 
         if (uidl.hasAttribute("error")) {
             if (errorIndicatorElement == null) {
-                errorIndicatorElement = DOM.createDiv();
+                errorIndicatorElement = DOM.createSpan();
                 errorIndicatorElement.setInnerHTML(" ");
                 DOM.setElementProperty(errorIndicatorElement, "className",
                         "v-errorindicator");