Geek Answers Handbook

Set border-style: none; on my anchor tags, but the border appears when I click the link - why?

As you can see from the example below, I have a black background and red links to emphasize this problem of the dotted borders displayed on my links when clicked. I added border-style:none , but this seems to have no effect. Is there any other way to remove the dashed border appearing around links when clicked?

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> html, body { height: 100%; margin: 0; padding: 0; font-weight:normal; font-size:12pt; font-family: Verdana, Arial, Helvetica, serif, sans-serif; background:black; } #linksouter { margin: 0; padding: 0; border-style:solid; border-width:0px; position:absolute; top: 0px; left: 0px; width: 80px; text-align:left; } #linksinner { margin: 80px 0 0 .5em; width:100%; display:inline; height:100%; } #linksinner a { color:red; text-decoration: none; display:block; margin: 5px 0 0 0; border-style:none; } </style> </head> <body> <div id="linksouter"> <div id="linksinner"> <a href="#">1</a> <a href="#">1</a> <a href="#">1</a> <a href="#">1</a> <a href="#">1</a> </div> </div> </body> </html>
+6
html css border onclick
source share
4 answers

the border you see is called a path. you can get rid of it by putting this style in your rules a :

 outline:none;

personally, I always define it as a rule blankets a at the top of my style sheets (I really don't like the outlines, although I know what they use)

 a { outline:none; }

hope this helps

+12
source share

This is not a border, this is a contour.

You can disable it by setting:

 a { outline: none; }
+3
source share

I believe that you need to define all the rules for your link, such as Link, Hover, Active and Visited.

Additional information: http://www.echoecho.com/csslinks.htm

-one
source share

Have you tried using these pseudo selectors by links? as

 a:hover a:active

Coz, when you install css with just a, it will only change the static look of the link.

-one
source share

More articles:


All Articles