title: IE7: Styling Bootstrap form-horizontal fieldset/legend to look like control-group label
body: <p>I'm building a criteria form using <a href="http://twitter.github.com/bootstrap/" rel="nofollow noreferrer">Bootstrap</a>. Some of the form fields include checkbox or radio options, so I'd like to employ <code>fieldset</code> and the attendant <code>legend</code> to associate the options with their category.</p>
  
  <p>Stop me if you've heard this before, but I'm having problems styling the form for IE7. Specifically:</p>
  
  <ol>
  <li>The <code>legend</code> seems to cause a line-break, so </li>
  <li>I can't seem to get the radio buttons (or checkboxes) to "stay" in the right column.</li>
  </ol>
  
  <p>This image demonstrates the "bad" layout on the first line (in red boxes), and the layout I'm trying to achieve on the second line (in green boxes).</p>
  
  <p><img src="https://i.stack.imgur.com/Nntxj.png" alt="The &lt;code&gt;legend&lt;/code&gt; seems to cause a line-break, so I can&#39;t seem to get the radio buttons (or checkboxes) to &quot;stay&quot; in the right column."></p>
  
  <p>Let's go to the HTML:</p>
  
  <pre><code>&lt;form name="form_search" id="form_search" action="acrq_results.html" method="post" class="form-horizontal"&gt;
  &lt;fieldset&gt;
      &lt;legend&gt;Regular legend not classed `.control-label`&lt;/legend&gt;
      &lt;div id="div_search_type" class="control-group"&gt;
      &lt;fieldset&gt;
          &lt;legend class="control-label"&gt;With fieldset and legend.control-label&lt;/legend&gt;
          &lt;div class="controls"&gt;
              &lt;label for="p_search_type1" class="radio inline span2"&gt;&lt;input type="radio" name="p_search_type" id="p_search_type1" value="both" checked="checked"  /&gt;Option 1&lt;/label&gt;
              &lt;label for="p_search_type2" class="radio inline span2"&gt;&lt;input type="radio" name="p_search_type" id="p_search_type2" value="passport_only"/&gt;Option 2&lt;/label&gt;
              &lt;label for="p_search_type3" class="radio inline span2"&gt;&lt;input type="radio" name="p_search_type" id="p_search_type3" value="crba_only" /&gt;Option 3&lt;/label&gt;
          &lt;/div&gt;
      &lt;/fieldset&gt;
      &lt;/div&gt;
      &lt;div id="div_other_reason" class="control-group"&gt;
          &lt;label class="control-label"&gt;no fieldset or legend&lt;/label&gt;
          &lt;div class="controls"&gt;
              &lt;label for="p_search_type1" class="radio inline span2"&gt;&lt;input type="radio" name="p_search_type" id="p_search_type1" value="both" checked="checked"  /&gt;Option 1&lt;/label&gt;
              &lt;label for="p_search_type2" class="radio inline span2"&gt;&lt;input type="radio" name="p_search_type" id="p_search_type2" value="passport_only"/&gt;Option 2&lt;/label&gt;
              &lt;label for="p_search_type3" class="radio inline span2"&gt;&lt;input type="radio" name="p_search_type" id="p_search_type3" value="crba_only" /&gt;Option 3&lt;/label&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/fieldset&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I've added these CSS rules to complement what comes with Bootstrap (but it's not doing the trick):</p>
  
  <pre><code>legend.control-label, legend.control-label &gt; span {
      border-bottom: 0;
      color: #000;
      cursor: pointer;
      display:inline-block;
      float:left;
      *display:inline;
      *float:none;
      font-size: 14px;
      font-weight: normal;
      line-height: 20px;
      margin-bottom: 5px;
  }
  </code></pre>
  
  <p>I have packaged all of this together in a JSFiddle at <a href="http://jsfiddle.net/jhfrench/zTAHh/" rel="nofollow noreferrer">http://jsfiddle.net/jhfrench/zTAHh/</a>. Again, <em>this</em> issue is for IE7; it looks fine in Chrome.</p>