Radio Buttons Won't Display Inline in IE7

Question

I have set up radio buttons to display inline on a contact form. They display properly in all tested browsers except IE7, they will not display inline. They are set up using ul and li.

CSS for radio buttons

fieldset div ul {
    margin: 5px 0 0 0;
    list-style:none;
    display:block;
    float:left;
}

fieldset div ul li {
    margin: 0 15px 0 0;
    padding: 0;
    list-style:none;
    display:inline;
    float:none;
}

fieldset div ul li label {
    display: inline;
    float: none;
    font-size: 1em;
    font-weight: normal;
    margin: 0;
    padding: 0;
}

fieldset div ul li input {
    background: none;
    border: none;
    display: inline;
    margin: 0 5px 0 0;
    padding: 0;
    width: auto;
    float:none;
}

HTML for form

<fieldset>
  <!-- Your Name -->
  <div>
    <label for="name">Name</label>
    <input type="text" name="name" id="name" class="required"/>
    </div>

  <!-- Email -->
  <div>
    <label for="emailAddress">Email</label>
    <input type="text" name="emailAddress" id="emailAddress" class="required email"/>
    </div>

  <!-- Phone -->
  <div>
    <label for="phone">Phone</label>
    <input type="text" name="phone" id="phone" />
    </div>

  <!-- Contact Time -->
  <div>
  <label for="contactTime">Best Time to Contact</label>
  <ul>
  <li><input type="radio" name="contactTime" value="morning" /><label for="morning">Morning</label></li>
  <li><input type="radio" name="contactTime" value="day" /><label for="day">Day</label></li>
  <li><input type="radio" name="contactTime" value="evening" /><label for="evening">Evening</label></li>
  </ul>
  </div>



  <!-- Contact Method -->
  <div>
  <label for="contactMethod" style="margin:15px 0 0 0;">Best Method of Contact</label>
  <ul>
  <li><input type="radio" name="contactMethod" value="phone" /><label for="phone">Phone</label></li>
  <li><input type="radio" name="contactMethod" value="email" /><label for="email">Email</label></li>
  </ul>
  </div>


  <!-- Coments -->
  <div class="floatLeft" style="margin:10px 0 0 0;">
    <label for="mess">Message</label>
    <textarea name="mess" id="mess" rows="15" cols="5"></textarea>
    </div>

  <!-- Controls -->
  <div class="controls">
    <input id="submit" name="submit" type="submit" value="Contact Us" class="button"/>
    </div>
  </fieldset>
<input name="url" type="hidden" value="" class="noDisplay"/>

score 0 · Answer 1 · answered Oct 26 '11 at 15:05

Try setting them to float left -

fieldset div ul li {
    margin: 0 15px 0 0;
    padding: 0;
    list-style:none;
    display:inline;
    float:left;
}

Shouldn't affect any other browsers, and should sort out IE7. Don't forget to clear: left; after them though.

Radio Buttons Won't Display Inline in IE7

1 Answers1