title: jquery resizable handles on all sides not showing
body: <p>I am trying to put handle on a jquery resiazble box on the 4 sides and 4 corners.</p>
  
  <p>I can get them on 4 sides no problem and the top corners but for some reason the bottom corners are playing up and I cant see for the life of me what I am doing wrong.</p>
  
  <p>the bottom border has a second border with some other symbols showing and the se resize handle isnt there. Also the cursor is SW on the whole bottom border</p>
  
  <p>any help greatly appreciated</p>
  
  <p>heres my code</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
   &lt;meta charset="utf-8" /&gt;
   &lt;title&gt;jQuery UI Resizable - Default functionality&lt;/title&gt;
   &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /&gt;
   &lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;
   &lt;script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"&gt;&lt;/script&gt;
  
   &lt;style&gt;
    #resizable {top:150px;left:150px; width: 150px; height: 150px; padding: 0.5em; }
    #resizable h3 { text-align: center; margin: 0; }
    .ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
    .ui-resizable-n { cursor: n-resize; height: 10px; width: 100%; top: 0px; left: 0; background: url(resize-handle.gif) top center no-repeat; border-top: 1px solid #f00;}
    .ui-resizable-s { cursor: s-resize; height: 10px; width: 100%; bottom: 0px; left: 0; background: url(resize-handle.gif) bottom center no-repeat; border-bottom: 1px solid #f00; }
    .ui-resizable-e { cursor: e-resize; width:10px; right: 0px; top: 0; height: 100%; background: url(resize-handle.gif) right center no-repeat; border-right: 1px solid #f00; }
    .ui-resizable-w { cursor: w-resize; width: 10px; left: 1px; top: 0; height: 100%; background: url(resize-handle.gif) left center no-repeat; border-left: 1px solid #f00; }
    .ui-resizable-sw { cursor: sw-resize; height: 10px; width: 100%; bottom: 0px; left: 0px; background: url(resize-handle.gif) bottom left no-repeat; border-top: 1px solid #f00;}
    .ui-resizable-se { cursor: se-resize; height: 10px; width: 100%; bottom: 0px; right: 0; background: url(resize-handle.gif) bottom right no-repeat; border-top: 1px solid #f00;}
    .ui-resizable-nw { cursor: nw-resize; height: 10px; width: 100%; top: 0px; left: 1px; background: url(resize-handle.gif) top left no-repeat; border-top: 1px solid #f00;}
     .ui-resizable-ne { cursor: ne-resize; height: 10px; width: 100%; top: 0px; right: 0; background: url(resize-handle.gif) top right no-repeat; border-top: 1px solid #f00;}
  &lt;/style&gt;
  &lt;script&gt;
   $(function() {
      $( "#resizable" ).resizable({ handles: "n, e, s, w, se, sw, nw, ne" });
      var handles = $( "#resizable" ).resizable( "option", "handles" );       
      $( "#resizable" ).resizable( "option", "handles", "n, e, s, w, se, sw, nw, ne" );
   });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="resizable" class="ui-widget-content"&gt;
     &lt;h3 class="ui-widget-header"&gt;Resizable&lt;/h3&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>