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

diff --git a/WebContent/VAADIN/themes/base/menubar/menubar.css b/WebContent/VAADIN/themes/base/menubar/menubar.css
index 0b0201b23145917470efa5275f45c20fa42b6b29..93ff5466b63fdc1b5c8fb16a2a3e9b8343fcbd6b 100644 (file)
--- a/WebContent/VAADIN/themes/base/menubar/menubar.css
+++ b/WebContent/VAADIN/themes/base/menubar/menubar.css
@@ -1,43 +1,35 @@
-.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;
@@ -45,23 +37,12 @@
        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;
@@ -70,13 +51,17 @@
        /* 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 {

diff --git a/WebContent/VAADIN/themes/base/styles.css b/WebContent/VAADIN/themes/base/styles.css
index 5294a04291cca06cc7cd71a7c119b21aff584e4d..2c508ca59eee7d87275260ded9242aee3d441529 100644 (file)
--- a/WebContent/VAADIN/themes/base/styles.css
+++ b/WebContent/VAADIN/themes/base/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 {

diff --git a/WebContent/VAADIN/themes/reindeer/menubar/menubar.css b/WebContent/VAADIN/themes/reindeer/menubar/menubar.css
index e109a0468169ea6ef4dec04b396c452caba0dbab..ac60652d110264ab54411b92cd2a5e729f0c03f3 100644 (file)
--- 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);

diff --git a/WebContent/VAADIN/themes/reindeer/styles.css b/WebContent/VAADIN/themes/reindeer/styles.css
index d19dbab2a41a08eb08a818d1cfc119ffe1d7c6f9..d94c7528f53da207d957e76011b8179238d14515 100644 (file)
--- a/WebContent/VAADIN/themes/reindeer/styles.css
+++ b/WebContent/VAADIN/themes/reindeer/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 {
@@ -3105,10 +3090,7 @@ td.v-datefield-calendarpanel-nextyear {
   background-position: left -380px;
        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;
@@ -3126,10 +3108,12 @@ td.v-datefield-calendarpanel-nextyear {
        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;
@@ -3137,7 +3121,7 @@ td.v-datefield-calendarpanel-nextyear {
   -background-image: url(common/img/vertical-sprites-ie6.png);
   background-position: left -403px;
        color: #fff;
-       text-shadow: #3b5a7a 0 1px 0;
+       text-shadow: 0 1px 0 #3b5a7a;
 }
 .v-menubar .v-menubar-menuitem-selected {
   background-image: url(common/img/vertical-sprites.png);
@@ -3146,15 +3130,9 @@ td.v-datefield-calendarpanel-nextyear {
 }
 .v-menubar-submenu .v-menubar-submenu-indicator {
        background: transparent url(menubar/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(menubar/img/submenu-icon-hover.png);

diff --git a/WebContent/VAADIN/themes/runo/menubar/menubar.css b/WebContent/VAADIN/themes/runo/menubar/menubar.css
index 324713db6e7b1e36554d902ae47b139982d00768..7c1a4036b33b30b6639ab535879bef643c589e38 100644 (file)
--- a/WebContent/VAADIN/themes/runo/menubar/menubar.css
+++ b/WebContent/VAADIN/themes/runo/menubar/menubar.css
@@ -3,12 +3,13 @@
        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;
 }
@@ -24,17 +25,11 @@
        border-left: 1px solid #d0d4d5;
 }
 .v-menubar-submenu .v-menubar-menuitem {
-       padding: 2px 16px 2px 10px;
+       padding-top: 1px;
+       padding-bottom: 1px;
+       line-height: 16px;
+       padding-left: 10px;
 }
-.v-menubar-submenu .v-menubar-menuitem-selected {
-       color: #fff;
-       background: #5daee8;
-}
-.v-menubar-submenu .v-menubar-submenu-indicator {
-       margin-right: -12px;
-       height: 14px;
-}
-.v-ie7 .v-menubar-submenu .v-menubar-submenu-indicator {
-       margin-right: -12px;
-       right: -3px;
+.v-menubar-submenu .v-menubar-menuitem-caption * { 
+       vertical-align: middle;
 }
\ No newline at end of file

diff --git a/WebContent/VAADIN/themes/runo/styles.css b/WebContent/VAADIN/themes/runo/styles.css
index 98c918c64907b3119a861f8ebdab8a72dbeee7b2..0ae0f686f00b7ea45442c96a7581e6f5841eb150 100644 (file)
--- 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 {

diff --git a/src/com/vaadin/terminal/gwt/client/ui/VMenuBar.java b/src/com/vaadin/terminal/gwt/client/ui/VMenuBar.java
index 961564d9d8c9397b4282545324c7e37e5afe4352..e5b0c4e32b1d8201ad4eee0be374a6f5f8e1eee5 100644 (file)
--- a/src/com/vaadin/terminal/gwt/client/ui/VMenuBar.java
+++ b/src/com/vaadin/terminal/gwt/client/ui/VMenuBar.java
@@ -5,6 +5,7 @@ import java.util.Iterator;
 import java.util.List;
 import java.util.Stack;
 
+import com.google.gwt.dom.client.NodeList;
 import com.google.gwt.event.logical.shared.CloseEvent;
 import com.google.gwt.event.logical.shared.CloseHandler;
 import com.google.gwt.user.client.Command;
@@ -19,6 +20,7 @@ import com.google.gwt.user.client.ui.RootPanel;
 import com.google.gwt.user.client.ui.UIObject;
 import com.google.gwt.user.client.ui.Widget;
 import com.vaadin.terminal.gwt.client.ApplicationConnection;
+import com.vaadin.terminal.gwt.client.BrowserInfo;
 import com.vaadin.terminal.gwt.client.ContainerResizedListener;
 import com.vaadin.terminal.gwt.client.Paintable;
 import com.vaadin.terminal.gwt.client.UIDL;
@@ -68,19 +70,12 @@ public class VMenuBar extends Widget implements Paintable,
         popup = null;
         visibleChildMenu = null;
 
-        Element table = DOM.createTable();
-        Element tbody = DOM.createTBody();
-        DOM.appendChild(getElement(), table);
-        DOM.appendChild(table, tbody);
+        containerElement = getElement();
 
         if (!subMenu) {
             setStylePrimaryName(CLASSNAME);
-            Element tr = DOM.createTR();
-            DOM.appendChild(tbody, tr);
-            containerElement = tr;
         } else {
             setStylePrimaryName(CLASSNAME + "-submenu");
-            containerElement = tbody;
         }
         this.subMenu = subMenu;
 
@@ -88,6 +83,11 @@ public class VMenuBar extends Widget implements Paintable,
                 | Event.ONLOAD);
     }
 
+    @Override
+    public void setWidth(String width) {
+        Util.setWidthExcludingPaddingAndBorder(this, width, 0);
+    }
+
     /**
      * This method must be implemented to update the client-side component from
      * UIDL data received from server.
@@ -180,6 +180,8 @@ public class VMenuBar extends Widget implements Paintable,
                             + ">&#x25BA;</span>");
                 }
 
+                itemHTML.append("<span class=\"" + CLASSNAME
+                        + "-menuitem-caption\">");
                 if (item.hasAttribute("icon")) {
                     itemHTML
                             .append("<img src=\""
@@ -188,8 +190,7 @@ public class VMenuBar extends Widget implements Paintable,
                                     + "\" class=\"" + Icon.CLASSNAME
                                     + "\" alt=\"\" />");
                 }
-
-                itemHTML.append(Util.escapeHTML(itemText));
+                itemHTML.append(Util.escapeHTML(itemText) + "</span>");
 
                 if (itemHasCommand) {
                     // Construct a command that fires onMenuClick(int) with the
@@ -265,7 +266,7 @@ public class VMenuBar extends Widget implements Paintable,
      * Remove all the items in this menu
      */
     public void clearItems() {
-        Element e = getContainingElement();
+        Element e = getContainerElement();
         while (DOM.getChildCount(e) > 0) {
             DOM.removeChild(e, DOM.getChild(e, 0));
         }
@@ -277,33 +278,10 @@ public class VMenuBar extends Widget implements Paintable,
      * 
      * @return
      */
-    public Element getContainingElement() {
+    public Element getContainerElement() {
         return containerElement;
     }
 
-    /**
-     * Returns a new child element to add an item to
-     * 
-     * @param index
-     *            the index in which point to add a new element in a submenu. -1
-     *            will add the new element as the last child (append)
-     * 
-     * @return
-     */
-    public Element getNewChildElement(int index) {
-        if (subMenu) {
-            Element tr = DOM.createTR();
-            if (index == -1) {
-                DOM.appendChild(getContainingElement(), tr);
-            } else {
-                DOM.insertChild(getContainingElement(), tr, index);
-            }
-            return tr;
-        } else {
-            return getContainingElement();
-        }
-    }
-
     /**
      * Add a new item to this menu
      * 
@@ -328,7 +306,7 @@ public class VMenuBar extends Widget implements Paintable,
         if (items.contains(item)) {
             return;
         }
-        DOM.appendChild(getNewChildElement(-1), item.getElement());
+        DOM.appendChild(getContainerElement(), item.getElement());
         item.setParentMenu(this);
         item.setSelected(false);
         items.add(item);
@@ -338,11 +316,7 @@ public class VMenuBar extends Widget implements Paintable,
         if (items.contains(item)) {
             return;
         }
-        if (subMenu) {
-            DOM.appendChild(getNewChildElement(index), item.getElement());
-        } else {
-            DOM.insertChild(getNewChildElement(-1), item.getElement(), index);
-        }
+        DOM.insertChild(getContainerElement(), item.getElement(), index);
         item.setParentMenu(this);
         item.setSelected(false);
         items.add(index, item);
@@ -356,9 +330,9 @@ public class VMenuBar extends Widget implements Paintable,
     public void removeItem(CustomMenuItem item) {
         if (items.contains(item)) {
             int index = items.indexOf(item);
-            Element container = getContainingElement();
 
-            DOM.removeChild(container, DOM.getChild(container, index));
+            DOM.removeChild(getContainerElement(), DOM.getChild(
+                    getContainerElement(), index));
             items.remove(index);
         }
     }
@@ -498,6 +472,7 @@ public class VMenuBar extends Widget implements Paintable,
         final int shadowSpace = 10;
 
         popup = new VOverlay(true, false, true);
+        popup.setStylePrimaryName(CLASSNAME + "-popup");
         popup.setWidget(item.getSubMenu());
         popup.addCloseHandler(this);
         popup.addAutoHidePartner(item.getElement());
@@ -537,6 +512,21 @@ public class VMenuBar extends Widget implements Paintable,
             }
             popup.setPopupPosition(left, top);
         }
+
+        // IE7 really tests one's patience sometimes
+        // Part of a fix to correct #3850
+        if (BrowserInfo.get().isIE7()) {
+            popup.getElement().getStyle().setProperty("zoom", "");
+            DeferredCommand.addCommand(new Command() {
+                public void execute() {
+                    if (popup.getElement().getStyle().getWidth() == null
+                            || popup.getElement().getStyle().getWidth() == "") {
+                        popup.setWidth(popup.getOffsetWidth() + "px");
+                    }
+                    popup.getElement().getStyle().setProperty("zoom", "1");
+                }
+            });
+        }
     }
 
     /**
@@ -663,13 +653,14 @@ public class VMenuBar extends Widget implements Paintable,
         protected boolean isSeparator = false;
 
         public CustomMenuItem(String html, Command cmd) {
-            setElement(DOM.createTD());
+            setElement(DOM.createDiv());
 
             setHTML(html);
             setCommand(cmd);
             setSelected(false);
 
             setStylePrimaryName(CLASSNAME + "-menuitem");
+
         }
 
         public void setSelected(boolean selected) {
@@ -715,6 +706,13 @@ public class VMenuBar extends Widget implements Paintable,
         public void setHTML(String html) {
             this.html = html;
             DOM.setInnerHTML(getElement(), html);
+            if (BrowserInfo.get().isIE6() && client != null) {
+                // Find possible icon element
+                final NodeList imgs = getElement().getElementsByTagName("IMG");
+                if (imgs.getLength() > 0) {
+                    client.addPngFix((Element) imgs.getItem(0).cast());
+                }
+            }
         }
 
         public String getText() {
@@ -722,7 +720,7 @@ public class VMenuBar extends Widget implements Paintable,
         }
 
         public void setText(String text) {
-            setHTML(text);
+            setHTML(Util.escapeHTML(text));
         }
 
         public void setEnabled(boolean enabled) {
@@ -775,9 +773,7 @@ public class VMenuBar extends Widget implements Paintable,
 
             // Measure available space
             int availableWidth = getElement().getClientWidth();
-            final int rootWidth = getElement().getFirstChildElement()
-                    .getOffsetWidth();
-            int diff = availableWidth - rootWidth;
+            int diff = availableWidth - getConsumedWidth();
 
             removeItem(moreItem);
 
@@ -824,4 +820,14 @@ public class VMenuBar extends Widget implements Paintable,
         }
     }
 
+    private int getConsumedWidth() {
+        int w = 0;
+        for (CustomMenuItem item : getItems()) {
+            if (!collapsedRootItems.getItems().contains(item)) {
+                w += item.getOffsetWidth();
+            }
+        }
+        return w;
+    }
+
 }