jQuery UI buttonset shift down in Internet Explorer 8 - jquery-ui

Question

I have this scipt,
<script>
$(document).ready( function() {
$('.add').button({
icons: 'ui-icon-plus',
text: false
}).next().button({
icons: 'ui-icon-minus',
text: false
}).next().button({
icons: 'ui-icon-arrowthick-1-w',
text: false
}).next().button({
icons: 'ui-icon-arrowthick-1-e',
text: false
});
$('.radio-container').buttonset();
});
</script>
<button class="add">Add</button>
<button class="delete">Delete</button>
<button class="left">Left</button>
<button class="right">Right</button>
<span class="radio-container">
<input type="Radio" name="radio" id="radio_1"><label for="radio_1">Radio 1</label>
<input type="Radio" name="radio" id="radio_2"><label for="radio_2">Radio 2</label>
</span>
It works fine with Firefox but failed with Internet Explorer (tested with Internet Explorer 8), radio button shifted down like this:
How do I fix it?
I use jQuery 1.4.2 and jQuery UI 1.8.5.

Answer 1

I hope this code can help you to solve your problem. It works fine in my IE 8.
$('.radio-container').buttonset().find('label').css({"vertical-align":"middle"});

Answer 2

jQuery sets CSS on a label to a margin of 8 pixels. Override and set CSS label { margin: 0px; } to fix it.

Answer 3

I think this has to do more with CSS than it does with the jQuery. For some reason you're styling your radio inputs as buttons--which I question why. But at any rate, I can only suggest hitting F12 on Internet Explorer 8 and take a look at your elements and how they're being represented by the CSS.
You may want to put the CSS as part of your question.