Border Bleed with .buttonset()

[Freddie Witherden]

Consider

<div id="radio">
    <input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
    <input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label>
    <input type="radio" id="radio3" name="radio" disabled="disabled"/><label for="radio3">Choice 3</label>
</div>

with a .buttonset() being placed on #radio. The border-left of the rightmost (disabled) radio button bleeds over the second (middle) radio button.

[Freddie Witherden]

A closely related issue to this is that buttons in a .buttonset with an adjacent button to the right (such as Choice 1 and Choice 2 in the above example) are not centre aligned. They have 14px of left padding but only 10px of right padding. This is due to the adjacent button shifting itself by -4px causing it to cover 4px of the previous button. This shift is also responsible for the rouge overlapping border.