title: hovering over one link makes tiny dash appear to right of it
body: <p>In this case, hovering over the left link makes a tiny dash appear to its right (between the two links).  How can I get rid of this? I see this in Safari and Chrome both, but I don't see anything in the style sheet that would make it do this.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
   &lt;html&gt;
   &lt;head&gt;
           &lt;meta charset="utf-8"&gt;
           &lt;title&gt;Walls&lt;/title&gt;
           &lt;link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"&gt;
           &lt;link rel="stylesheet" href="custo.css"&gt;
  
          &lt;script src="prettyPhoto_compressed_3/js/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="prettyPhoto_compressed_3/css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" /&gt;
  &lt;script src="prettyPhoto_compressed_3/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
   &lt;/head&gt;
   &lt;body&gt;
  
   &lt;br&gt;
                   &lt;a href="gallery.html"&gt;
                   &lt;img src="test.jpg" class="testclass" alt="test" width="170" /&gt;
                   &lt;/a&gt;
  
                   &lt;a href="info.html"&gt;
                   &lt;img src="test.jpg" class="testclass" alt="test" width="55"  /&gt;
                   &lt;/a&gt;
  
  
  
   &lt;div class="container-fluid"&gt;
   &lt;br&gt;
  
  
   &lt;/div&gt;&lt;!-- .container --&gt;
  
      &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript" charset="utf-8"&gt; &lt;!--initialize prettyPhoto--&gt;
       $(document).ready(function(){
       $("a[rel^='prettyPhoto']").prettyPhoto();
        });
      &lt;/script&gt;
  
  
   &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>