It is a simple task which many of us either forget or are ignorant including me until the last project we handled. Due to our increased focus on UX, which also compiles smoother links for better navigation, i got hand of this simple tip and decided to share it with you all.
Include this snippet in your css stylesheet.
a:focus {
outline:none;
}
See the above screenshot for an example.
“Fix Link Outlines” sounds for me like it’s a bug. But in fact it’s not a bug.
It’s a feature for accessibility. If you can’t use a mouse you can tab through the links and the outline shows you where the cursor is.
I think it’s not good to show people how to disable it without mentioning the idea behind the outline.
Thats true Manuel. Lets call it a handy tip then
. Maybe we can target some other elements on the website you really dont want to show the outline. Like for example, images, positioned backgrounds, text-indent:-5000px, etc..
Example:
a:focus img {
outline: none;
}
Thanks for reading the post. Do subscribe to our rss feed for updates
Hi
Is it alright if I go a bit off topic? I am trying to view your page on my new iPhone but it won’t show correctly, do you have any solutions? Shall I try to find an upgrade for my browser or something? Thanks in advance! Tana x 
Hello Tana, The web wont show up correctly yet for the devices. We haven’t optimized it yet, I am going to use media queries on this website soon which will fix the problem on most of the devices around, but it will take a couple of weeks before we can, quite held up with projects now. Please see CSS3 Media Queries http://bit.ly/caf0Kw . You will know a lot more
Hmmm thanks for yet another very interesting post. Where do you find your inspiration for all this
?
Great work keep it coming
Great post.