Radio button formatting in IE8 (not displaying correctly)

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:

<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..

Here is the CSS:

.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;    
}

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