Buttonset: incorrect button width/alignment in IE8

[PutKettleOn]

Appears in IE8. I tested IE6, IE9, FF, Chrome and they were all ok. Only appears when you have spaces in the button text and within a float. The width of the button seems to be set by the first word of the text rather than the whole text. Workaround: use   for the spaces.

[PutKettleOn]

​http://jsbin.com/akexiy/2

[bmorearty]

@PutKettleOn, Thank you for the suggested workaround for this bug. Confirmed that it works. You saved my bacon.

[bchiasson]

I was unable to reproduce the issue in IE8 Browser Mode within IE9 using the jsbin above. If you are still experiencing the issue, please provide more information so that we can triage.

​http://jsfiddle.net/bchiasson/kaYpX/4/

[PutKettleOn]

Tested in IE8. Confirm it is now fixed.

[stew]

Still seems broken on 1.10.1

[tj.vantoll]

This is indeed still broken: ​http://jsbin.com/akexiy/12.

The test case ​http://jsfiddle.net/bchiasson/kaYpX/4/ did not include the floating mentioned by the OP. If you add it that case breaks as well: ​http://jsfiddle.net/tj_vantoll/qz6nq/.

I confirmed that this only occurs in IE8. Looks fine in IE7 & IE9.

[tj.vantoll]

Giving the buttonset an explicit width works around the problem as well. The problem seems to be related to IE8 reporting a bad width under these circumstances. I can look into this one.

[tj.vantoll]

Reduced this down a little: ​http://jsbin.com/ewanup/4/edit.

Removing this rule causes the white space to be respected again but I have no idea why:

.ui-buttonset .ui-button {
    margin-right: -.3em;
}

Adding white-space: nowrap to .ui-button also fixes it. It's not an option for the library itself but it would make a good workaround if you're running into this problem.

[Scott González]

Confirmed fixed with the button rewrite.