title: How to remove that ugly border in my link with a background image?
body: <p>I'm making a navigation menu with background images. I managed to vanish the text with text-indent, but it shows a very ugly border while clicking the link. How do I get rid of the border? My css is gven below; </p>
  
  <pre><code>       #menu{
    width:670px;
    float:right;
        }
  
      #menu ul{
      padding-top:10px;
       }
        #menu ul li{
          list-style-type:none;
       display: block;
        float:left;
      width:163px;
       height:270px;
       }
  
     #menu ul li a{
     height:270px;
      display: block;
      width:163px;
      text-indent:-9999px;
      border:none;
        }
       .box_1{
        background: url(images/box_1.png) no-repeat;
        width:163px;
       height:268px;
       border:none;
       }
  
       .box_2{
      background: url(images/box_2.png) no-repeat;
      width:163px;
      height:268px;
      border:none;
         }
  
      .box_3{
       background: url(images/box_3.png) no-repeat;
       width:163px;
      height:268px;
      border:none;
       }
  
       .box_4{
       background: url(images/box_4.png) no-repeat;
       width:163px;
       height:268px;
       border:none;
       }
  </code></pre>
  
  <p>And my html:</p>
  
  <pre><code>&lt;div id="menu"&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a class="box_1" href="#"&gt;creative solutions&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a class="box_2" href="#"&gt;dynamic development&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="#" class="box_3"&gt;unlimited opportunities&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a  class="box_4" href=#"&gt;exceptional approach&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>Thanks in advance for helping!!</p>