title: Can't select text inside of DIV element
body: <p>Have a look at <a href="http://sevenbits.github.io" rel="nofollow">this page</a> and <a href="http://sevenbits.github.io" rel="nofollow">this page</a> on my site. None of the text in <code>advert</code> DIV tag can be selected. Additionally, some of the text, particularly in the Incinerator product page, cannot be selected in <code>topic-div</code> above the <code>iframe</code> element holding the YouTube video.</p>
  
  <p>Here's the relevant HTML:</p>
  
  <pre><code>&lt;div id="topic-div"&gt;
          &lt;!--&lt;p style="background-color:rgba(160, 70, 48, 0.25);height:100%;top:0px;"&gt;
                  Want to try the latest and greatest version of Incinerator? &lt;a href="../downloads/Incinerator.mpkg.zip"&gt;Download the 1.2.1 beta version!&lt;/a&gt;
          &lt;/p&gt;--&gt;
          &lt;p&gt;
              Incinerator is an app that securely erases files from your hard drive with extreme prejudice. It is capable of obliterating pretty much any file in its way - and yours. 
          &lt;/p&gt;
          &lt;p&gt;
              &lt;h4&gt;Why Incinerator?&lt;/h4&gt;
              &lt;p&gt;When you normally erase a file on your Mac, more often than not, the file can &lt;strong&gt;still be retrieved&lt;/strong&gt;. Using professional software, even amateur computer users can find potentially dangerous information on your hard drive, such as sensitive documnts, bills, etc. This is because when you erase a file, the file does not "disappear": the operating system simply marks the data as no longer being used, but the data still remains and is accessible until another file is created that writes over the data that previously was there. This means that special software can hunt for these unused data sections and restore them into files. The following video&lt;sup&gt;*&lt;/sup&gt; demonstrates exactly how easy this is:&lt;/p&gt;
          &lt;/p&gt;
          &lt;p&gt;
              &lt;div class="video-container"&gt;
                  &lt;iframe width="512" height="512" src="https://www.youtube.com/embed/1Ju8iRE2Ehg" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
              &lt;/div&gt;
          &lt;/p&gt;
          &lt;p&gt;
              Because of this threat, it is vital that you write over sensitive files before erasing them, so that anybody who tries to access your hard drive and recover the files will find random data, and not anything potentially sensitive. Incinerator can do this job, and it is available on the Mac App Store totally, 100% free.
          &lt;/p&gt;
          &lt;p style="display:block; margin-left:auto; margin-right:auto; width:730px;"&gt;
              &lt;h3&gt;Screenshots:&lt;/h3&gt;
              &lt;a href="javascript:cycleLeft();"&gt;&amp;lt;&lt;/a&gt;
              &lt;img src="../img/incinerator-window.png" id="rotate-img"&gt;
              &lt;a href="javascript:cycleRight();"&gt;&amp;gt;&lt;/a&gt;
          &lt;/p&gt;
          &lt;p&gt;
              &lt;h3&gt;Features:&lt;/h3&gt;
                  &lt;ul&gt;
                      &lt;li&gt;Scaleable Destruction&lt;/li&gt; - Have the program write over your file one time, or a thousand.
                  &lt;li&gt;Notifications&lt;/li&gt; - Incinerator fully integrates into your OS X desktop, even sending you notifications when your file has been incinerated.
                  &lt;li&gt;Super Secure&lt;/li&gt;
                  &lt;ul&gt;
                      &lt;li&gt;On the App Store&lt;/li&gt; - Incinerator is available on the Mac App Store, so you have full confidence in knowing that it has been approved by the makers of OS X itself - the ultimate seal of Mac compatibility.
                      &lt;li&gt;Sandboxed&lt;/li&gt; - A new technology, sandboxing allows each app on your Mac to play nicely together, preventing them from doing rogue things like erasing all of your files. Incinerator only has access to the files you open, giving you a sigh of relief.
                      &lt;li&gt;Signed&lt;/li&gt; - The official version of Incinerator is signed by my developer ID issued by Apple. This means it runs without warning on your Mac, with the understanding that if something goes wrong, Apple can pull the certificate, preventing the app from running.
                  &lt;/ul&gt;
                  &lt;li&gt;Compatible with &lt;strong&gt;all New Macs&lt;/strong&gt;&lt;/li&gt; - Yes, that new MacBook Air you bought can run Incinerator. :)
              &lt;/ul&gt;
          &lt;/p&gt;
          &lt;p&gt;
              Need help? Don't hesitate to contact me. I can be reached through &lt;a href="https://github.com/SevenBits" target="_blank"&gt;GitHub&lt;/a&gt;, or you can &lt;a href="../contact.html"&gt;email me&lt;/a&gt;.
          &lt;/p&gt;
          &lt;p&gt;
              &lt;small&gt;&lt;strong&gt;*&lt;/strong&gt; - This video and its mentioned commercial software is included as a demonstration to demonstrate the necessity of the product advertised on this page. Its use does not constitute an endorsement of the product contained therein, and I cannot be held resposnsible for any damages that it may incur.&lt;/small&gt;
          &lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And CSS:</p>
  
  <pre><code>.subnav {
      visibility: hidden;
      position: absolute;
      top: 100%;
      right: 0;
      width: 200px;
      height: auto;
      opacity: 0;
      transition: all 0.1s;
      background: #E98D70;
  }
  
  .subnav li {
      float: none;
  }
  
  .subnav li a {
      border-bottom: 1px solid #2e2e2e;
  }
  
  #options:hover .subnav {
      visibility: visible;
      top: 100%;
      opacity: 1;
  }
  
  /* Main site */
  .float-right {
      float: right;
  }
  
  .float-left {
      float: left;
  }
  
  #advert {
  background-color: rgba(170, 70, 48, 0.75);
  }
  
  .main-page-content {
  position: absolute;
  top: 39px;
  left: 0px;
  right: 0px;
  width: 730px;
  z-index:-1;
  
  margin-left: auto;
  margin-right: auto;
  }
  
  .description {
  float:left;
  display:block;
  }
  
  .on-display {
  float:right;
  right:25px;
  display:inline-block;
  }
  
  #topic-div {
  margin: 5px;
  padding: 5px;
  
  background-color:rgba(170, 70, 48, 0.25);
  height:100%;
  top:0px;
  }
  
  footer {
  position: fixed;
  bottom: 0;
  }
  
  /* YouTube videos */
  .video-container {
  position: relative;
  padding-bottom: 56.25%;
  margin: 35px;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
  }
  
  .video-container iframe,  
  .video-container object,  
  .video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  }
  </code></pre>
  
  <p>I've tried modifying the CSS a bit, but all of the examples on the web of other answers to this question don't seem to apply to me.</p>
  
  <p>This also happened seemingly overnight - it broke relatively quickly and stopped working on the latest versions of Safari, Firefox, Chrome, and Chromium, all on OS X.</p>
  
  <p>Any ideas?</p>