title: IE fieldset rendering
body: <p>I have a form in an HTML page, works great in all browsers except IE.  I know it has something with IE rendering the fieldset tag, and I have tried using a psuedo div to hack it, but that did not work.  Anybody run across this or have a work around?<br>
  Here's a fiddle: <a href="http://jsfiddle.net/G9NSx/" rel="nofollow noreferrer">http://jsfiddle.net/G9NSx/</a>
  &amp;
  Here's the code:</p>
  
  <pre><code>        &lt;form&gt;
                      &lt;fieldset&gt;
                      &lt;ol&gt;
                          &lt;li&gt;
                              &lt;label for="name"&gt;Name&lt;em&gt; *&lt;/em&gt;&lt;/label&gt;
                              &lt;input id="name" /&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;label for="company"&gt;Company Name&lt;/label&gt;
                              &lt;input id="company" /&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;label for="address"&gt;Address&lt;/label&gt;
                              &lt;input id="address" /&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;label for="city"&gt;City&lt;/label&gt;
                              &lt;input id="city" /&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;label for="state"&gt;State/Providence&lt;/label&gt;
                              &lt;input id="state" /&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;label for="country"&gt;Country&lt;/label&gt;
                              &lt;input id="country" /&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;label for="phone"&gt;Phone&lt;em&gt; *&lt;/em&gt;&lt;/label&gt;
                              &lt;input id="phone" /&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;label for="fax"&gt;Fax&lt;/label&gt;
                              &lt;input id="fax" /&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;label for="email"&gt;Email&lt;/label&gt;
                              &lt;input id="email" /&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;fieldset class="regarding"&gt;
                                  &lt;legend&gt;Regarding:&lt;em&gt; *&lt;/em&gt;&lt;/legend&gt;
                                      &lt;label&gt;&lt;input type="radio" name="regarding" /&gt; Capabilities&lt;/label&gt;
                                      &lt;label&gt;&lt;input type="radio" name="regarding" /&gt; Testing Information&lt;/label&gt;
                                      &lt;label&gt;&lt;input type="radio" name="regarding" /&gt; Business Relations&lt;/label&gt;
                                      &lt;label&gt;&lt;input type="radio" name="regarding" /&gt; Other&lt;/label&gt;
                              &lt;/fieldset&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;label for="add-info"&gt;Additional Info.&lt;/label&gt;&lt;br /&gt;
                              &lt;textarea name="add-info"&gt;&lt;/TEXTAREA&gt;
                          &lt;/li&gt;
                      &lt;/ol&gt;
                          &lt;input type="submit" value="Submit"&gt; &lt;input type="reset" value="Reset"/&gt;&lt;br /&gt;
                          &lt;br /&gt;
                          &lt;span class="bold"&gt;Required Fields&lt;em&gt; *&lt;/em&gt;&lt;/span&gt;
                      &lt;/fieldset&gt;
              &lt;/form&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>form {
      border: 1px solid #0066FF;
      /*background-image: url(../images/form-bg.jpg);*/
      background-color: #FFF;
  }
  
  form fieldset {
      margin: 10px;
      padding: 20px;
  }
  
  form legend {
      padding: 0 2px;
      font-weight: bold;
  }
  
  form label {
      display: inline-block;
      line-height: 1.8;
      vertical-align: top;
  }
  
  form fieldset ol {
      margin: 0;
      padding: 0;
  }
  
  form fieldset li {
      list-style: none;
      padding: 5px;
      margin: 0;
  }
  
  form fieldset li textarea {
      min-width: 300px;
      max-width: 500px;
      }
  
  form fieldset fieldset {
      border: none;
      margin: 3px 0 0;
  }
  
  form fieldset fieldset legend {
      padding: 0 0 5px;
      font-weight: normal;
  }
  
  form fieldset fieldset label {
      display: block;
      width: auto;
  }
  
  form em {
      font-weight: bold;
      font-style: normal;
      color: #0066FF;
  }
  
  form label {
      width: 120px; /* Width of labels */
  }
  
  form fieldset fieldset label {
      margin-left: 123px; /* Width plus 3 (html space) */
  }
  
  form fieldset ol li fieldset.regarding {
      padding: 0px;
      }
  </code></pre>
  
  <p>Here is a screenshot of the issue I am having in IE9
  <img src="https://i.stack.imgur.com/PhB34.jpg" alt="enter image description here"></p>