CODEWITHSUNDEEP
htmlcssimageborderhyperlink
Samia Ruponti
Samia Ruponti

Reputation: 4038

How to remove that ugly border in my link with a background image?

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; 

       #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;
     }

And my html:

<div id="menu">
<ul>
<li><a class="box_1" href="#">creative solutions</a></li>
 <li><a class="box_2" href="#">dynamic development</a></li>
 <li><a href="#" class="box_3">unlimited opportunities</a></li>
 <li><a  class="box_4" href=#">exceptional approach</a></li></ul>
 </div>

Thanks in advance for helping!!

Upvotes: 0

Views: 6183

Answers (5)

Montaser El-sawy
Montaser El-sawy

Reputation: 830

Try this line on the top of your css file,

* :focus { outline: 0; }

Upvotes: 0

Sam
Sam

Reputation: 170

Probably you are talking about ugly dotted border that is shown up when the element (in your case image) receives focus (by click or by pressing tab).

Use css property:

outline: none;

Upvotes: 0

Joel Etherton
Joel Etherton

Reputation: 37543

Apply another css style:

#menu ul li a:active {
    border:none;
}

Upvotes: 2

DanS
DanS

Reputation: 18483

You mean the dotted outline? Remove it like this:

a {
   outline: 0;
}

You may want to add an alternative focus style. See here.

Upvotes: 9

demux
demux

Reputation: 4654

The dotted line thing?

a {outline:0}

Upvotes: 1

Related Questions