title: Custom cursor not working correctly in Chrome
body: <p>I'm having trouble getting chrome to display my custom cursor correctly but it seems to work as intended in FireFox. </p>
  
  <p>To give a little context, as part of my attempt to get up to speed with HMLT5/Javascript I'm putting together a mini shooting game using the new canvas element and I'm using a custom scope-like cursor I created with Axialis Cursor Workshop and here's the html and css for the canvas:</p>
  
  <pre><code>&lt;canvas id="canvas" class="block" width="800" height="700"
          onSelectStart="this.style.cursor='url(cursors/scope.cur), crosshair'; return false;"/&gt;
  
  #canvas
  {
      cursor: url(../cursors/scope.cur), crosshair;
      background: url(../images/canvas_background.jpg);
  }
  </code></pre>
  
  <p>In chrome, I see a warning saying "<em>Resource interpreted as image but transferred with MIME type application/octet-stream.</em>" in relation to the <em>scope.cur</em> file. When I move my mouse to the top left corner of the canvas area I can see the cursor is drawn but the 'hot spot' of cursor is not at the center of the cursor.</p>
  
  <p>In firefox, this works with no problem, I can still see the same cursor and the 'hot spot' of the cursor is at its center as I intended.</p>
  
  <p>Any idea what I'm doing wrong here and how can I fix it for chrome? The standard <em>crosshair</em> cursor works fine in chrome (in that its 'hot spot' is positioned correctly) but it doesn't quite fit my purpose here.</p>
  
  <p>You can see for yourself <a href="http://www.theburningmonk.com/demos/shooting%20target/part%202/shooting_target_demo_part_2.html" rel="nofollow">here</a>, just move the cursor to the top left corner in chrome and firefox to see the difference.</p>