title: Styling a list of checkboxes with a label
body: <p>I want to have a list of check boxes down the page, which has a label, as shown in the following layout:</p>
  
  <pre><code>My options  [x] Checkbox 1
              [ ] Checkbox 2
              [ ] Checkbox 3
              [ ] Checkbox 4
  </code></pre>
  
  <p>I'm using the method outlined here <a href="https://stackoverflow.com/questions/1229856/what-is-the-best-way-to-style-a-list-of-checkboxes">What is the best way to style a list of checkboxes</a> in the answer by @Magnar. This works fine, but when I wrap the checkbox text as labels, the checkboxes list horizontally across the page in IE (Chrome and Firefox still render it fine).</p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;div id="options"&gt;
    &lt;label&gt;My options&lt;/label&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;label&gt;&lt;input type="checkbox"&gt;Checkbox 1&lt;/label&gt;&lt;/li&gt;
      &lt;li&gt;&lt;label&gt;&lt;input type="checkbox"&gt;Checkbox 2&lt;/label&gt;&lt;/li&gt;
      &lt;li&gt;&lt;label&gt;&lt;input type="checkbox"&gt;Checkbox 3&lt;/label&gt;&lt;/li&gt;
      &lt;li&gt;&lt;label&gt;&lt;input type="checkbox"&gt;Checkbox 4&lt;/label&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My CSS:</p>
  
  <pre><code>#options label {
    float: left;
  }
  
  #options ul {
    margin: 0;
    list-style: none;
    float: left;
  }
  </code></pre>
  
  <p>If someone could help me get it to work nicely in IE too I'd really appreciate it.  I'd also love to know <em>why</em> it works everywhere but IE :).</p>