title: IE7 CSS/Jquery bug (negative margin and mouseover highlighting)
body: <p>I have a form, and visually I'd like to make all radio buttons appear one per line like:</p>
  
  <pre><code>[]Yes
  []No
  </code></pre>
  
  <p>rather than their default of displaying like:</p>
  
  <pre><code>[]Yes []No
  </code></pre>
  
  <p>Here is the CSS I'm using to accomplish that (I've omitted the extraneous parts):</p>
  
  <pre><code>input.radio
  {
      display:block;   
  }
  
  label.choice
  {
      display: block;
      margin:-1em 0 0 25px;
  }
  </code></pre>
  
  <p>and the corresponding HTML:</p>
  
  <pre><code>&lt;ul&gt;
          &lt;li&gt;
              &lt;input name="yn1" id="y1" class="radio" type="radio" value="yes"  /&gt;
              &lt;label class="choice"&gt;Yes&lt;/label&gt;
  
              &lt;input name="yn1" id="n1" class="radio" type="radio" value="no"  /&gt;
              &lt;label class="choice"&gt;No&lt;/label&gt;
  
          &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>My target browsers are (IE7+, FF3+) and it works fine on all of the above like that.</p>
  
  <p>But then I have this other feature, I want to highlight the background of the currently selected form question. All my form questions are list items, so this seems simple enough, add some CSS to set the background color on mouseover/mouseout. </p>
  
  <p>Here's the CSS and JQuery for the highlight:</p>
  
  <pre><code>.highlighted {
      background-color: yellow;
  }
  
  $("li").mouseover(function () { 
      $(this).addClass('highlighted'); 
  });
  
  $("li").mouseleave(function () { 
      $(this).removeClass('highlighted'); 
  });
  </code></pre>
  
  <p>This also works fine on all my target browsers.</p>
  
  <p>BUT... When I combine those two pieces together at the same time, it explodes under IE7, and the radio buttons disappear when the highlight appears, making the form completely unusable. </p>
  
  <p>Help! Is this possible? How could I fix this so both of these features work at the same time? </p>