Question

I am theming a radio button using jQuery;

$(function() {
    $("#chart_switch").buttonset();
});

The HTML:

<form>
    <div id="chart_switch">
        <input type="radio" id="pie" name="chart_type" value="pie" checked="checked" /><label for="pie">Pie</label>
        <input type="radio" id="bar" name="chart_type" value="bar" /><label for="bar">Bar</label>
    </div>
</form>

The result:

What I don’t understand is why a gap appears between the two options. I’m using Firefox 8.0 and also appears the same in Chrome (v15.0)

Answer 1

After spending an hour researching and trying all the solutions for this problem and then finally posting my question on SO, literally 5 minute later I discover that my jQuery needed updating…once I updated this, it appears as expected.