Fixes #3850: Submenu icon is placed outside the menu in IE7

 * Refactored VMenuBar to not use TABLE element. Now uses DIVs all the way.
 * Note, the theme for MenuBar sub-menus seems to be quite fragile in IE6 and IE7. IE6 doesn't allow any of the contained elements to get "hasLayout", otherwise the popup will be too wide. IE7 needs some DeferredCommand magic to make it render separator items correctly.

svn changeset:10301/svn branch:6.2

1 files changed, 36 insertions, 56 deletions

diff --git a/WebContent/VAADIN/themes/runo/styles.css b/WebContent/VAADIN/themes/runo/styles.css
index 98c918c649..0ae0f686f0 100644
--- a/WebContent/VAADIN/themes/runo/styles.css
+++ b/WebContent/VAADIN/themes/runo/styles.css
@@ -645,46 +645,38 @@ div.v-app-loading {
 	float: left; /* Force minimum width for button */
 }
 
-.v-ie6 .v-menubar {
-	float: left; /* Force minimum width in IE6 */
-}
-.v-menubar table {
-	border-collapse: collapse;
-	padding: 0;
-	margin: 0;
+.v-menubar {
+	float: left; /* Force minimum width */
+	overflow: hidden;
 }
 .v-menubar .v-menubar-menuitem {
 	cursor: default;
 	vertical-align: middle;
 	white-space: nowrap;
+	float: left;
 }
-.v-menubar .v-menubar-menuitem * {
+.v-menubar .v-menubar-menuitem-caption * {
 	vertical-align: middle;
+	white-space: nowrap;
 }
 .v-menubar-submenu {
 	background: #fff;
 }
-.v-menubar-submenu table {
-	border-collapse: collapse;
-	padding: 0;
-	margin: 0;
-}
-.v-menubar-submenu table td {
-	white-space: nowrap;
-	padding: 0;
-	margin: 0;
-}
-.v-menubar-menuitem-selected{
+.v-menubar-menuitem-selected {
 	background: #333;
 	color: #fff;
 }
 .v-menubar-submenu .v-menubar-menuitem { 
 	cursor: default;
-	vertical-align: middle;
-	white-space: nowrap;
+	position: relative;
+	padding-right: 1.5em;
 }
-.v-menubar-submenu .v-menubar-menuitem * { 
-	vertical-align: middle;
+.v-menubar-submenu .v-menubar-menuitem-caption {
+	display: block;
+}
+.v-menubar-submenu .v-menubar-menuitem *,
+.v-menubar-submenu .v-menubar-menuitem-caption * {
+	white-space: nowrap;
 }
 .v-menubar-submenu-indicator {
 	display: none;
@@ -692,23 +684,12 @@ div.v-app-loading {
 	font-family: arial, helvetica, sans-serif;
 }
 .v-menubar-submenu .v-menubar-submenu-indicator {
-	display: inline;
-	display: inline-block;
-	zoom: 1;
-	margin-left: 1em;
-	float: right;
-	height: 100%;
-	font-size: 0.9em;
-}
-.v-ie6 .v-menubar-submenu .v-menubar-submenu-indicator {
+	display: block;
 	position: absolute;
 	right: 0;
-	margin-right: 0;
-	margin-top: -2px;
-}
-.v-ie7 .v-menubar-submenu .v-menubar-submenu-indicator {
-	position: relative;
-	margin-left: 0;
+	width: 1em;
+	height: 1em;
+	font-size: 0.9em;
 }
 .v-menubar-menuitem-disabled {
 	color: #999;
@@ -717,13 +698,17 @@ div.v-app-loading {
 	/* Arial has the most coverage for geometric entity characters */
 	font-family: arial, helvetica, sans-serif;
 }
+.v-menubar-separator {
+	overflow: hidden;
+}
 .v-menubar-separator span {
 	display: block;
 	text-indent: -9999px;
-	height: 1px;
-	margin: 3px 0;
+	font-size: 1px;
+	line-height: 1px;
+	border-top: 1px solid #ddd;
+	margin: 3px 0 2px;
 	overflow: hidden;
-	background: #ddd;
 }
 .v-menubar .v-icon,
 .v-menubar-submenu .v-icon {
@@ -2233,12 +2218,13 @@ div.v-tree-node-leaf {
 	border-left: 1px solid #c6cbcc;
 }
 .v-menubar .v-menubar-menuitem {
-	padding: 0 10px;
-	margin: 0 10px;
+	padding: 1px 10px;
 	border: 1px solid #c6cbcc;
 	border-left: none;
+	height: 18px;
+	line-height: 18x;
 }
-.v-menubar .v-menubar-menuitem-selected {
+.v-menubar-menuitem-selected {
 	color: #fff;
 	background: #5daee8;
 }
@@ -2254,19 +2240,13 @@ div.v-tree-node-leaf {
 	border-left: 1px solid #d0d4d5;
 }
 .v-menubar-submenu .v-menubar-menuitem {
-	padding: 2px 16px 2px 10px;
-}
-.v-menubar-submenu .v-menubar-menuitem-selected {
-	color: #fff;
-	background: #5daee8;
-}
-.v-menubar-submenu .v-menubar-submenu-indicator {
-	margin-right: -12px;
-	height: 14px;
+	padding-top: 1px;
+	padding-bottom: 1px;
+	line-height: 16px;
+	padding-left: 10px;
 }
-.v-ie7 .v-menubar-submenu .v-menubar-submenu-indicator {
-	margin-right: -12px;
-	right: -3px;
+.v-menubar-submenu .v-menubar-menuitem-caption * { 
+	vertical-align: middle;
 }
 
 .v-Notification {