title: getSelection not working properly in Chrome
body: <p>In the below code <code>selectTextOnly()</code> gets called by clicking on any of the cells or the div at the top via <code>onclick</code>. </p>
  
  <p><strong>In Chrome</strong>  Everything works if I click on any of the table cells. However, when I click on the div, the function gets called but no selection gets set.</p>
  
  <p>Clicking both the div and the cells works as expected in Firefox.</p>
  
  <p>Why does clicking the div not select the cells in Chrome? </p>
  
  <p>Example on <a href="http://jsfiddle.net/DelightedD0D/2K3ZT/1/" rel="nofollow noreferrer">jsFiddle</a></p>
  
  <p><strong>Html:</strong></p>
  
  <hr>
  
  <pre><code>&lt;div style="width: 45px; height:20px; background-color:#339900" onclick="selectTextOnly('notes')" id="test"&gt;&lt;/div&gt;
  
  &lt;table id="all" class="optionEmail"  width="100%" border="0"&gt;
    &lt;tr&gt;
      &lt;td id="notes" onclick="selectTextOnly('notes')"&gt;This is the notes cell&lt;/td&gt;
    &lt;/tr&gt;
    &lt;td&gt; 
    &lt;table id="email"&gt;
    &lt;tr&gt;
      &lt;td onclick="selectTextOnly('email')"&gt;This is the email cell&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td id="itinerary" onclick="selectTextOnly('itinerary')"&gt;This is the flights cell&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td onclick="selectTextOnly('all')"&gt;This is the all cell&lt;/td&gt;
    &lt;/tr&gt;
    &lt;/table&gt;
    &lt;/td&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>javascript:</strong></p>
  
  <hr>
  
  <pre><code>function selectTextOnly(containerid) {
      if (document.selection) {
          var range = document.body.createTextRange();
          range.moveToElementText(document.getElementById(containerid));
          range.select();
      } else if (window.getSelection) {
          var range = document.createRange();
          range.selectNode(document.getElementById(containerid));
          window.getSelection().addRange(range);
      }
  }
  </code></pre>