Radio button formatting in IE8 (not displaying correctly)

Posted by Kevin on Stack Overflow See other posts from Stack Overflow or by Kevin
Published on 2010-02-12T21:14:56Z Indexed on 2010/04/07 8:03 UTC
Read the original article Hit count: 913

Filed under:
|

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

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

© Stack Overflow or respective owner

Related posts about css

Related posts about ie8