title: Small line of certain color displaying below images in anchor tags
body: <p>So I have uplodaded two graphics as nav buttons to my webpage. A small line of the same color as the buttons appears below and in between the two buttons. Here is a picture showing the problem. </p>
  
  <p><a href="http://imgur.com/ikYjLUE" rel="nofollow">http://imgur.com/ikYjLUE</a></p>
  
  <p>These buttons were created in fireworks and then I saved them and linked to them in my webpage. This isnt a line that has come from a defect in one of the graphics. Spreading out the graphics with padding does not fix it as shown below: </p>
  
  <p><a href="http://imgur.com/rUX7fvI" rel="nofollow">http://imgur.com/rUX7fvI</a></p>
  
  <p>Nor does trying to put a CSS value for the border remove it in case it was a small piece of border for some reason. I know it isnt a defect in the graphics because the two images alone on seperate webpages produce no line, sadly I can't post screenshots of that here due to a lack of reputation (no more than 2 links). </p>
  
  <p>So I do not know how to remove this annoying line when they are next to each other. This is only two buttons alone for now but it will be developed into a full webpage eventually. These buttons will act as the nav bar so I need them close and this line to be gone! These buttons have an opacity increase and decrease effect when rolled over which was created in jQuery. I viewed these buttons in Chrome for the screenshots and I havent tried other browsers but I need this line to be removed from all browsers. Here is all my webpage code below: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
   $(".nav_btn").mouseenter(function(){
    $(this).fadeTo(100, 1.0);
   });
   $(".nav_btn").mouseleave(function(){
    $(this).fadeTo(100, 0.75);
   });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.nav_btn{
   opacity: 0.75;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
   &lt;head&gt;
    &lt;base href="C:/Users/Adasli199/CGC project/"; target="_self"&gt;
    &lt;link rel="stylesheet"; type="text/css"; href="code/stylesheet.css"/&gt;
    &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"; src="code/jQuery.js"&gt;&lt;/script&gt; 
    &lt;link rel="shortcut icon" href="Assets/CGC icon.ico"/&gt;
    &lt;title&gt; CGC | Template &lt;/title&gt; 
   &lt;/head&gt;
   &lt;body&gt;
    &lt;div id="nav_bar"&gt;
     &lt;a href="Pages/Home.html"&gt;
      &lt;img class="nav_btn"; id="home_btn"; src="Assets/Home button.png"/&gt;
     &lt;/a&gt;
     &lt;a href="Pages/SEO.html"&gt;
      &lt;img class="nav_btn"; id="SEO_btn"; src="Assets/SEO button.png"/&gt;
     &lt;/a&gt;
    &lt;/div&gt; 
   &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>If anyone could help I would be very greatful! Thanks!</p>