title: IE 8 div and css cursor
body: <p>In example bellow when you hover on icons cursor should be changed to different. It works except of IE 8. On IE 8 these icons turned to be unclikable, i.e. not only cursor are not changed, but also Jquery click event does not fire. Consider how the following html code works at FF, IE7 and eventually at IE8:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;title&gt;CSS IE 8 cursor test&lt;/title&gt;
       &lt;style type="text/css" media="screen"&gt;
          .icon-button {
              float: left; 
              cursor: pointer;
          }
          .ui-icon { width: 15px; height: 10px; background-image: url(http://sstatic.net/so/img/replies-off.png); }
   &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
     &lt;div class="icon-button ui-icon"&gt;&lt;/div&gt;
     &lt;div&gt;Sample Text&lt;/div&gt; 
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>What migth be the root of problem? What could be possible workarrounds? <br/>
  Thanks in advance.</p>
  
  <p>P.S. Changing DOCTYPE is not really possible.<br/>
  Also if I remove  <em>float: left</em> on this example it seems like "fixed", but when I remove it on a website, besides broken design, it does not help also.</p>