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, 8 insertions, 15 deletions

diff --git a/WebContent/VAADIN/themes/reindeer/menubar/menubar.css b/WebContent/VAADIN/themes/reindeer/menubar/menubar.css
index e109a04681..ac60652d11 100644
--- a/WebContent/VAADIN/themes/reindeer/menubar/menubar.css
+++ b/WebContent/VAADIN/themes/reindeer/menubar/menubar.css
@@ -5,10 +5,7 @@
 	background-image: url(img/bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
 	color: #d1d3d6;
 	text-shadow: rgba(0,0,0,.9) 0 1px 0;
-}
-.v-menubar table {
-	margin: 0 8px;
-	height: 23px;
+	padding: 0 8px;
 }
 .v-menubar .v-menubar-menuitem {
 	padding: 3px 8px;
@@ -26,31 +23,27 @@
 	padding: 4px 0;
 }
 .v-menubar-submenu .v-menubar-menuitem {
-	padding: 1px 20px 1px 10px;
-	height: 16px;
+	padding: 1px 26px 1px 10px;
 	line-height: 16px;
 }
+.v-menubar-submenu .v-menubar-menuitem-caption * { 
+	vertical-align: middle;
+}
 .v-menubar .v-menubar-menuitem-selected,
 .v-menubar-submenu .v-menubar-menuitem-selected {
 	background: #4d749f repeat-x;
 	background-image: url(../common/img/sel-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
 	color: #fff;
-	text-shadow: #3b5a7a 0 1px 0;
+	text-shadow: 0 1px 0 #3b5a7a;
 }
 .v-menubar .v-menubar-menuitem-selected {
 	background-image: url(img/menu-sel-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
 }
 .v-menubar-submenu .v-menubar-submenu-indicator {
 	background: transparent url(img/submenu-icon.png) no-repeat right 70%;
-	width: 16px;
-	margin: 0 -20px 0 5px;
+	width: 26px;
+	height: 16px;
 	text-indent: -999px;
-	vertical-align: middle;
-}
-.v-ie7 .v-menubar-submenu .v-menubar-submenu-indicator {
-	margin: 0 -20px 0 0;
-	position: relative;
-	right: -4px;
 }
 .v-menubar-submenu .v-menubar-menuitem-selected .v-menubar-submenu-indicator {
 	background-image: url(img/submenu-icon-hover.png);