Radio button formatting in IE8 (not displaying correctly) - css

Question

I'm having a problem with getting my radio buttons laid out (and checkboxes) correctly in IE8 .. Firefox, Chrome, Opera all working however ..
Here is a screenshot of the problem
The code is below:
.row input (line 471) {
float: left;
display: inline;
width: 16px;
height: 16px;
margin-top: 0pt;
margin-right: 5px;
margin-bottom: 0pt;
margin-left: 0pt;
}
.row label (line 479) {
float: none;
font-weight: normal;
font-size: 12px;
line-height: 16px;
}
div.panes label (line 70) {
font-size: 95%;
font-weight: bold;
color: #222222;
line-height: 150%;
padding-bottom: 3px;
display: block;
}
<label for="AdditionalResponses_0__Response" id="AdditionalResponses_0__Response_Label">Single answer</label>
<div class="row " id="AdditionalResponses_0__Response">
<input id="AdditionalResponses_0__Response_one" name="AdditionalResponses[0].Response" type="radio" value="one" />
<label for="AdditionalResponses_0__Response_one" id="AdditionalResponses_0__Response_one_Label">one</label>
<input id="AdditionalResponses_0__Response_two" name="AdditionalResponses[0].Response" type="radio" value="two" />
<label for="AdditionalResponses_0__Response_two" id="AdditionalResponses_0__Response_two_Label">two</label>
<input id="AdditionalResponses_0__Response_three" name="AdditionalResponses[0].Response" type="radio" value="three" />
<label for="AdditionalResponses_0__Response_three" id="AdditionalResponses_0__Response_three_Label">three</label>
<input id="AdditionalResponses_0__Response_four" name="AdditionalResponses[0].Response" type="radio" value="four" />
<label for="AdditionalResponses_0__Response_four" id="AdditionalResponses_0__Response_four_Label">four</label>
</div>
Sorry for the one long line, but that's how I got it through the source..

Answer 1

Try removing the height or float from .row input.
Avoid adjusting the line-height if you can, as well.

Answer 2

Looks like another case of IE Stepdown: Preventing Menu Stepdown

Answer 3

Are you trying to align them vertically or horizontally?
If vertically, add this to your css
.row label {
display: block;
}
and change your markup so that your inputs are wrapped by the labels. You wouldn't have to use the for="" attribute this way.
<label>
<input id="AdditionalResponses_0__Response_one" name="AdditionalResponses[0].Response" type="radio" value="one" />
one
</label>
If horizontally, add
.row input, .row label {
float: left;
display: block;
}

Answer 4

Im not sure but - did you try the clear property?
in your case the value would be left i think
w3 source