I have a group of radio buttons that I want to be equally spaced and centered under column headers. These buttons use this css to do so:
.staiRadioButtons
{
display: inline;
width: 111px;
}
This works just fine in Firefox and Chrome, but in Safari the buttons are not as wide and thus misalign. What is the proper way of equally spacing radio buttons in a table column?
The section of HTML:
<tr>
<td>1. I feel pleasant.</td>
<td><span id="spryradio1">
<label>
<input name="pleasant" type="radio" class="staiRadioButtons" id="pleasant_0" value="4" />
<input name="pleasant" type="radio" class="staiRadioButtons" id="pleasant_1" value="3" />
<input name="pleasant" type="radio" class="staiRadioButtons" id="pleasant_2" value="2" />
<input name="pleasant" type="radio" class="staiRadioButtons" id="pleasant_3" value="1" />
</label>
<span class="radioRequiredMsg">Please make a selection.</span></span></td>
</tr>