Within my GWT application, I've developed a button panel using a HorizontalPanel that consists of Button widgets enclosed in <g:cell> elements.
<g:HorizontalPanel styleName="{style.horizontalPanel}">
<g:cell>
<g:Button ui:field="selectButton" title="{constants.buttonLabel}"
text="{constants.actionLabelSelect}" />
</g:cell>
...
</g:HorizontalPanel>
These buttons are styled with the following CSS:
.gwt-Button {
font-size: 13px;
color: #337BB1;
margin: 0px 10px;
padding: 5px 7px;
border: 1px solid #E3E3E3;
}
The issue arises when using button labels with two words. The button panel appears too wide on Internet Explorer compared to other browsers. Even resizing the window does not solve the problem as the entire panel adjusts accordingly, causing certain buttons to be cut off. In Firefox and Chrome, the buttons resize appropriately and line breaks occur as needed to fit within the window.
Why is Internet Explorer displaying this behavior?
Furthermore, debugging in GWT's superDevMode and devMode does not replicate the issue in IE.
How can this discrepancy be explained?
Browser version: IE8, GWT version 2.5.1