title: dynamically loaded form controls & links not clickable
body: <ul>
  <li><p>Content loaded through AJAX into a div isn't clickable until the user zooms the page. This seems to reset or remap some clickable zone definition somewhere.</p></li>
  <li><p>In some other cases, the "clickable zone" gets just a bit off and you can notice it as the mouse cursor changes in the wrong area, not under my input fields/buttons/links.</p></li>
  <li><p>This issue is seen under Chrome and Mozilla, I'm not working with IE but it also happens there.</p></li>
  </ul>
  
  <p>From the symptoms above, what can be the causes?</p>
  
  <p>This is the code I'm using to load the elements, (I doubt it's too relevant since the content is effectively being loaded):</p>
  
  <pre><code>function reqHandler(xhr, section) {
      var x = xhr;
      var s = section;
      this.callback = function() {
          if (x.readyState == 4) {
              var ss = document.getElementById(s);
              if (ss != null) 
                  ss.innerHTML = x.responseText;
              stripAndExecuteScript(x.responseText);
          }
      }
  };
  
  
  function loadInto(page,section, wait) {
      if (wait==null) wait = true;
      if (wait) makeWait(section);    
      xhr = createXMLHttpRequest();
      handler = new reqHandler(xhr, section);
      xhr.onreadystatechange = handler.callback;
      xhr.open("GET", page, true);
      xhr.send(null);
  }
  </code></pre>
  
  <p>stripAndExecute is just to eval the loaded content's javascript, but it isn't used, the loaded content has simple link tags and a form, but anyway here's the code:</p>
  
  <pre><code>function stripAndExecuteScript(text) {
      var scripts = '';
      var cleaned = text.replace(/&lt;script[^&gt;]*&gt;([\s\S]*?)&lt;\/script&gt;/gi, function(){
          scripts += arguments[1] + '\n';
          return '';
      });
  
      if (window.execScript){
          window.execScript(scripts);
      } else {
          eval(scripts);  
  
      }
      return cleaned;
  }
  </code></pre>
  
  <p>HTML of the generated div content:</p>
  
  <pre><code>&lt;form id="users_form"&gt;
      &lt;table&gt;
          &lt;colgroup&gt;&lt;col width="65px"&gt;
          &lt;/colgroup&gt;&lt;tbody&gt;&lt;tr&gt;
              &lt;td colspan="2"&gt;Llene todos los campos&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td align="right"&gt;Nombre&lt;/td&gt;
              &lt;td&gt;&lt;input class="text_field" name="name" value="" type="text"&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td align="right"&gt;E-Mail&lt;/td&gt;
              &lt;td&gt;&lt;input class="text_field" name="email" value="" type="text"&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td align="right"&gt;Usuario&lt;/td&gt;
              &lt;td&gt;&lt;input class="text_field" name="user" value="" type="text"&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td align="right"&gt;Contraseña&lt;/td&gt;
              &lt;td&gt;&lt;input class="text_field" name="password" type="password"&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td align="right"&gt;Repita contraseña&lt;/td&gt;
              &lt;td&gt;&lt;input class="text_field" name="password_confirm" type="password"&gt;&lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr class="type_display_block"&gt;
              &lt;td align="right"&gt;Tipo&lt;/td&gt;
              &lt;td&gt;&lt;select class="text_field" name="type" style="width:100%;"&gt;
                      &lt;option value="0"&gt;Administrador&lt;/option&gt;
                      &lt;option value="1"&gt;Gerente&lt;/option&gt;
                      &lt;option value="2"&gt;Normal&lt;/option&gt;
              &lt;/select&gt;&lt;/td&gt;
          &lt;/tr&gt;&lt;tr&gt;       
              &lt;td colspan="2"&gt;&lt;a class="button" style="float: right;" href="javascript:void(0);" onclick="doDBinsert();"&gt;&lt;img alt="Enviar" src="http://localhost/eclipse/mensajesInternos/img/check.png" height="25px" width="25px"&gt;Enviar
              &lt;/a&gt;&lt;/td&gt;
  
  
          &lt;/tr&gt;
      &lt;/tbody&gt;&lt;/table&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>The element which becomes not clickable is the "Enviar" button in the bottom.</p>
  
  <p>NOTE: I'm not using jQuery.</p>
  
  <p>NOTE2: If I put the "Enviar" link not in the next row but in the next column next to the select, like this:</p>
  
  <pre><code>&lt;tr class="type_display_block"&gt;
              &lt;td align="right"&gt;Tipo&lt;/td&gt;
              &lt;td&gt;&lt;select class="text_field" name="type" style="width:100%;"&gt;
                      &lt;option value="0"&gt;Administrador&lt;/option&gt;
                      &lt;option value="1"&gt;Gerente&lt;/option&gt;
                      &lt;option value="2"&gt;Normal&lt;/option&gt;
              &lt;/select&gt;&lt;/td&gt;
  
              &lt;td colspan="2"&gt;&lt;a class="button" style="float: right;" href="javascript:void(0);" onclick="doDBinsert();"&gt;&lt;img alt="Enviar" src="http://localhost/eclipse/mensajesInternos/img/check.png" height="25px" width="25px"&gt;Enviar
              &lt;/a&gt;&lt;/td&gt;
  
  
          &lt;/tr&gt;
  </code></pre>
  
  <p>this is, in a TD instead of a TR, the element "Enviar" is clickable again. Actually I discovered the Select controls are responsible for the wrong offset in other sections as well. This is reproducible under windows and linux in Mozilla Firefoz and Chrome. </p>
  
  <p>A bug of some kind?...</p>