Almost all websites have them, and they are just extraordinary ugly: Dotted borders around text links. They show up when you click a link and won’t go away till you clicked somewhere else, reloaded the page or moved to another page:
Yes, I know that you saw that before. But why are all those sites displaying those ugly borders? I don’t know, because you don’t need to know any advanced techniques to remove the border! Just add the following code to your CSS document:
a {
outline: none;
}
And gone are the dotted borders!
But does that validate?
It’s easy to think that everyone isn’t using this because it doesn’t validate, though it does validate! Check it out on the W3C Validator on your page if you don’t believe me.
But why isn’t everyone using this?
Because most people don’t know that it is possible In the past it was necessary to have the dotted border around licked links to see if you actually clicked it or not (in he past we had sow computers, so it took a while before the thing actually started downloading the new site). Today we don’t need that anymore in most cases, so please add this code to your Cascading Style Sheets and stop the ugliness!
Simple, yet satisfying 🙂
You might need to check over your spelling though.
But why isn’t everyone using this?
Something to show that a link is active is important for accessibility reasons. Not everybody will be navigating your site with a mouse. Or indeed power users that may wish to ‘tab’ through the links on your page, without the dotted outline (or a suitable alternative) this would be very difficult.
By all means replace this style with something suitable but do not simple switch it off.
What about people browsing without eyeballs? What about cuddlefish on the internet?
I turn off this ugly marquee constantly; if you are visiting my websites without a mouse, anything I can do to make it as difficult as possible for you is a plus. If you are trying to navigate with the keyboard, you’re doing the whole internet wrong. I also don’t support lightpens or raki gestures on my websites.
I have rather bad Parkinson’s. I use mainly voice recognition software and a handful of keys on the keyboard to navigate websites. Your advice is terrible.
Though, maybe in the future someone like me can afford to use eyetracking in place of a mouse. I’ve done enough CSS to know how much longer and more tedious it can get when you make everything fully accessible, but I have hope that things will get easier for future generations like they have for me. Then maybe I can just look at your links to click on them. 🙂
Way cool! Some very valid points! I appreciate you penning this write-up plus the
rest of the site is also really good.
Hi, i feel that i noticed you visited my weblog thus i got here to
return the choose?.I’m trying to to find things to improve my web site!I guess its adequate to use some of your concepts!!
Was having this problem in the WordPress 2012 theme. Entered a search on how to remove the dotted lines around linked objects and found this page. The solution listed above solved the problem.
In styles.css look for the line of code that states “outline: thin dotted;” and change it to “outline: none;”
The comments above regarding accessibility should be taken into consideration when making any adjustments.