title: Click event not firing. Why?
body: <p>Using jQuery, I have attached a "click" event handler to some "li" HTML elements.</p>
  
  <p>The problem is: when I click the "li" element, the event does not fire.</p>
  
  <p>"How?" - will you ask... so, see it by yourself <a href="http://jsfiddle.net/cSPWx/" rel="nofollow">in this simple jsFiddle</a></p>
  
  <p>Consider:</p>
  
  <ul>
  <li>I have tested on Firefox 14.0.1 and Chrome 16.0.912.77 in my Ubuntu system.</li>
  <li>I have stripped a lot of stuff from CSS, HTML and JS of my original code while "hunting" the cause.</li>
  <li>You can click in the form <strong>label</strong> elements to see the event handler function working. But try to click in the <strong>li</strong> elements... does not work!</li>
  <li>If you just remove the <code>float: left</code> style from the "li" element, or the <code>position: relative</code> style from the "form", then the problem disappears!</li>
  </ul>
  
  <p>So, I am not exactly asking how to circumvent or workaround the problem, I am asking <strong>why</strong> the "click" event does not fire. Is this a bug? A bug from what? Browser? jQuery? CSS? It simply does not make sense to me, and I will love to see an explanation!</p>
  
  <p>Thanks.</p>