Web Development Blog

by Ei Sabai Nyo

19 Feb, 2007

How to get rid of tracing dotted line on a:active with CSS    

How to get rid of tracing dotted line on a:active with CSS

You know those tracing dotted lines (see above) which appear when you click on a link? I found out not too long ago that you can get rid of them easily just by adding the following into your stylesheet file.


a {
outline: 0;
}

Technorati Tags: , , ,

Love what you've just read? Subscribe to our newsletter to receive tips, resources and special offers related to web development & design.
Your name:   Your email:  

13 Responses to “How to get rid of tracing dotted line on a:active with CSS”

  1. steve says:

    Only works in IE?

  2. eisabai says:

    Hi steve,

    I don’t think it’s applicable for IE as you don’t see tracing dotted lines like that in IE. It’s mainly for FF.

  3. jab says:

    Yes, it only works in IE. FF still has the tracing lines. I cannot get rid of them… and it is annoying.

    My style sheet looks like this:
    .a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #999999;
    text-decoration: none;
    outline: none
    }

  4. jab says:

    any cures would be awesome

  5. eisabai says:

    Hi jab,

    Try this:

    a {
    outline: none;
    }

    If that doesn’t work, try:

    a:focus {
    outline: none;
    }

  6. jab says:

    the a:focus tag worked…PERFECTO!

    thanks!

  7. eisabai says:

    You’re welcome.

  8. Bee says:

    Any ideas on how to get rid of the same problem in FF on an input submit button?

  9. eisabai says:

    Hi Bee,

    If you’re talking about the dotted line that you see when you click on an input button, I don’t think we can control that in CSS. However, you might be able to get around it by using an image instead of an input button.

  10. Amy says:

    Thanks so much – this was driving me nuts as I was using two images for links on a new site’s landing page. I had tried all the border:none and 0px commands I could think of. Testing in FF, and the a {outline:none;} did the trick right away, but I added in the a:focus as well. Site looks much better now!

  11. Greg says:

    All you need to do is add outline: inherent;

  12. Mike says:

    For me that

    a { outline: 0 }

    did it for all FF in Linux, Mac, Win.

    Thank you!

  13. Tim says:

    Very helpful. Just started using Cufon and this was really annoying me.

Profile PicHello! Welcome to Web development blog! My name is Ei Sabai and on this blog, I write about web development, mobile app development, latest web technologies and the likes. Read more about me or have a look at some of the tips & resources I've written.
Subscribe to our newsletter to receive tips, resources and special offers related to web development & design.
We do NOT spam.
Your name:  
Your email:  

Tips & Resources

Tips & Resources
WordPress Web Hosting
Recommended web hosting providers for WordPress 3.0
iPhone Native App Development
Important steps into iPhone app development for beginners
iPhone Web App Development
Tips for iPhone web app development
Coupons for Web Developers
Get discounts on web hosting, domain names, templates, etc
10 Useful jQuery Snippets
Easy-to-use jQuery snippets for any website
HTML Email Newsletter
Step-by-step tutorial on how to code an HTML email newsletter
  • bluehost Hosting $6.95/month
  • Joomla Templates

Recommended Book

Categories