title: div with only border
body: <p>I made a div over another div to create a border.</p>
  
  <p><a href="https://dl.dropboxusercontent.com/u/30396291/LOL/borderproblem.png" rel="nofollow">Here</a> is an example:</p>
  
  <p>Now I have a problem: if I put the mouse over the image I get the focus on the <code>div</code> with the border only (for ex., if I want right click and save img) but the <code>div</code> is empty all the time (is used only for the border) how i can ignore the center part of the <code>div</code>?  </p>
  
  <p>I used a <code>div</code> because I place the border over the image/other stuff and I can't have the same result using the original border (is placed outside the image and I get a white space from the border and the image). </p>
  
  <p>In <a href="http://jsfiddle.net/8z3u3/2/" rel="nofollow">this jsfiddle</a> the dimension aren't right. (I place the border with js code)  </p>
  
  <pre><code>img = $('&lt;div style="position:absolute; width: ' + ($(this) .outerWidth(true) +  
      leagueBorders[templeague].width) + 'px; height: ' + ($(this) .outerHeight(true) +  
      leagueBorders[templeague].height) + 'px; max-width: none; top: '+  
      ($(this).position().top + leagueBorders[templeague].top) +'px; left: '+  
      ($(this).position().left + leagueBorders[templeague].left) +'px;"  
      class="'+leagueBorders[templeague].classe+'"&gt;&lt;/div&gt;');`  
  </code></pre>
  
  <p>But you can easily see the problem. If you right click on the image you get the right click menu of a empty space instead of the image options.<br>
  if I a text with a scroll bar (instead of the image) I can't use the scroll bar.</p>