jquery ui buttonset shift down in IE 8

Question

Hi All,

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 FF but failed with IE (tested with IE 8), radio button shifted down like this

how to fix it?

I use jquery 1.4.2 & jquery-ui 1.8.5

thank you

Answer 1

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 f-12 on IE8 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.