How to remove dotted border from links in Firefox
Here is an email from a reader, Alain, with a problem:
Hi Annie,This was my response. Add this to your CSS style sheet (which is the part of the template between the <head>and </head> elements that contain a lot of these { }) :
Thanks for all the valuable information on your blog. I'm a new blogger with no previous background in computer and programming and I benefit a lot from your blog. I have a minor problem with my Minima Stretch Template. I didn't know where to post my question on your blog so I have decided to email you.
Problem Description
When I use the Firefox browser (I don't have this problem with IE), my post titles and my various kinds of links are displayed with a dotted border when I click over them. I can't figure out the source of this minor problem. I have notice that other bloggers using the Minima Stretch Template also have this problem when I visit them with my Firefox browser but I don't experience this problem on your blog. I have checked your source code but I can't figure out what you have done in order to avoid this problem. Can you help me please?
a:activeNo more dotted borders!
{
outline: none;
}
a:focus
{
-moz-outline-style: none;
}
To remove post image borders is explained in How to Remove or Change Image Borders
Labels:
Blogger Beta,
Design,
Graphics,
Hacks
219 Comments:
cool and helpful tips! care to ex links?
@ituloy, I really don't do link exchanges. If I find a site that I think would benefit my readers in personalizing their blogs, I just add the link.
But, I'm happy you find my blog helpful!
Annie - cool code and almost exactly what I thought, but it doesn't work in IE. I still get the dotted border around all links when they're active. Annoying.
Well, it DOES work in IE7 which I have at home. It was in IE6 which I have at work that it didn't work. Hmmmm..... (By the way: once again: THANK YOU!!!! You're the best.)
@jau, thanks for reporting back. It would of drove me crazy trying to figure it out. But, there has to be a fix for IE6. Maybe I can find that!
You all seem so happy about this code. I am sure you are not realizing why those outlines are there.
Many people either don't have, or physically unable to use a mouse. Even, I myself often use keyboard navigation. Without that outline user will have no idea where he currently is. Think twice before you remove something that is there by default.
Sincerely, Zoffix Znet Zoffix Znet Portal
@zoffix, As a matter of fact, I am all happy about this code! Sorry if you don't share my enthusiasm.
@annie, it is not about "enthusiasm" it is about telling some people "Sorry, but you can't use my site because I don't like the way that border looks, so LEAVE NOW". Todays technology is way more advanced than before, it's not really about "looks" anymore.
P.S.: it is very ironic to see the "dude in a wheelchair" icon next to the captcha on a page that shows how to prevent disabled people accessing your website.
P.P.S: s/Todays/Today's/;
@zoffix, You commented, "Without that outline user will have no idea where he currently is." I took a look at your site. When clicking on your links, there wasn't an outline around your links in Firefox or IE.
In my blog there is a clear 'link trail'. My site uses distinctly different colors for links, visited links and hoovering over a link. It is quite easy to figure out where you have visited. I have no need, and neither does a disabled person, of an unattractive border around a link.
My site is quite outdated, visit http://haslayout.net for some of my work.
You are misunderstanding me. The disabled person uses _that border_ to know what link he or she is about to click. You know that by where your mouse pointer is, he can't use a mouse. It's not about visited or not, it's _about to visit right now_. Try to navigate the links with your keyboard in any sane browser with and without your "fix", then you will understand what I mean.
In annie's defence, link accessiblity is not limited to outlines. Titles and alt tags are other ways of letting a user know which link they're on.
Here's a solution that validates and takes care of the dotted Firefox issue...
a, input {
outline-color: invert;
outline-style: none;
outline-width: medium;
}
@Jared Burns, Thanks for another solution!
No problem. Actually, this is even better...
a:active, a:focus, input[type="image"] {
outline: 0;
}
@Jared Burns, Thanks again. It's nice to get advice from a pro! Sometimes I feel like I should rename BlogU to Annie's Homespun Coding!!
Thanks Annie
I've been scratching my head all day over that one - it really looks loads better without that annoying border
Cheers Enrico
Another solution to the accessibility issue is to provide an all-text menu at the bottom of the page. That way, you can maintain your design and still be accessible.
Cool stylesheet man i am very much thankful to everybody this is very much helpful for me for hold a client
I have this problem, except the dotted border is only on my permalink link in firefox...
I've tried all the different link css tricks here and no dice.
Any other ideas?
@Russ, try:
.post-title a, .post-title a:visited, .post-title strong
{
outline: none;
}
a:focus
{
-moz-outline-style: none;
}
thanks annie.
still can't get it though. the firefox dotting is only on my timestamp permalink, nowhere else.
very frustrating.
Hi, I am having the same problem as Russ...I added Annies code, Jared's code, and the second of your's Annie and no luck! i have some decent knowledge of CSS and I have tried a couple things as well...but zero.
If you can help...I will be very grateful!
@Scarlett1313, this has me baffled. I'm in the middle of another project right now, but when I get a chance, I will look into it further.
For those of you still having difficulty removing the dotted lines even with the posted css hack, try removing the "a" from the second declaration. It should read:
:focus {
-moz-outline-style: none;
}
Ya it looks weird but it works in more situations than just specifying the hack for "a" anchors.
Regarding the accessibility argument earlier - the dotted line is mostly a remnant of older accessibility functionality, somewhat an artifact from the early days of browsing. There are much better accessibility methods now. Ever wonder why Internet Exploder doesn't include dotted lines around selectable elements? It's because there are many other methods for dealing with keyboard page navigation, proving Anonymous's argument moot.
@jase, WOW, thanks for another option. I don't think I would of figured it out.
Removing the dashes from a linked image is great, but what if you have a non-linked image that still shows a dashed border in firefox, both in pages and by viewing the image itself? this has been bugging me for the longest time b ecause it makes no sense at all.
About accessibility... There exists an optimal solution if you use JavaScript.
Think about it... Sites look ugly when you click a link and some border pops up. On the other hand without mouse clicks this same border is sorely needed.
The solution:
Mouse clicks should disable the border (as the user obviously can use mouse) while Tab key presses should enable it back. By default the borders should be left enabled of course, so the users without JS and those that do not use Tab can still see the links.
Catching key presses:
http://www.openjs.com/scripts/events/keyboard_shortcuts/
Catching mouse events is even simpler, google for solutions if interested.
Of course, is it really worth the trouble? :)
This should really be done in browser, but it is a bit optimistic to expect that. I'll code it for my pages once I have enough time, but for now... I'll leva the borders be. :)
Enjoy,
Anze
Thank you! That's real helpful.
Hi,
I had this dotted border on image link. Your tips helped me to solve. It works great.
Thanks.
Thomas Antonymuthu
Billiant! Thanks very much. LondonPop
Thanks for such a nice tip
really helped me alot
many thanks :)
stay happy
peace
Thank you so much!! I was baffled, but you solved my problem with this. Cheers.
I cannot thank you enough for this post. Everywhere else was posting for "simpletons," like I didn't already KNOW to set border: none in the css. Seriously... Thank You!
Haha.. this is amazing. those dotted borders have been bothering me since day 1.. thanks for this
This is a very nice tip, and from a design stance, could be very useful. As others have pointed out, it could also be very diminishing to a disabled user who uses keyboard navigation. Here is my suggestion to satisfy both sides. Create a DIV to hold all of your page's content. You may style this to exclude the border (This should include all images and links inside the border).
Ex.
#maindiv a, #maindiv :active, #maindiv :focus { outline: none; }
Then outside of the DIV, create a footer DIV with links to the main parts of your site. It should also include important links from the page. This way, the part of the page that most will see will not have the outline around links, but for those that use keyboard-only navigation they can use the page footer that does have the outline.
Hello, just wanted to share my dotted border tutorial on hasLayout.net with you. It shows a more accessible method to deal with the border and includes the fix for IE6/IE7 that some of the commenters wondered about.
Cheers!
test
I dont know if you will read this. But I'll say it anyways: thanks for this useful post and great job with your blog, and by the way you were the 2nd in google when I searched for 'remove firefox dotted border', congrats.
Thanks so much for sharing, it worked like a charm :)
Worked great, thanks!
That's great, thank you.
Thx that helped me remove the problem from my directory links
The 100% working solution is to combine them both like this:
a:active, a:active * { outline: none !important; -moz-outline-style: none !important; }
a:focus, a:focus * { outline: none !important; -moz-outline-style: none !important; }
Than you Annie. saved my time.
mann you saved my day! thnx a lot! :)
Thank you! Such a simple solution!
Did anyone else have a problem with their rollovers not working when using the originally suggested CSS code? Mine stopped, but then I tried removing the a:focus section and the rollovers worked, but the dotted line came back in Firefox. It seems to be completely working fine in IE.
Any suggestions? Thanks!!
it's not working for image links !
elijah
Thanks so much!
It doesn't work for FF 3.6.3
hi,
how to remove dotted line in input type button and select option.
a:focus { -moz-outline-style: none; }
a:focus { outline: none; }
http://bloggeruniversity.blogspot.com/2007/01/how-to-remove-dotted-border-from-links.htm
a, input {
outline-color: invert;
outline-style: none;
outline-width: medium;
}
its not working for me.
why not simply reset outline from every element at the beginning and re-add it where needed...
say:
*, *:active, *:focus{outline:none;-moz-outline-style: none;}
greets!
Thanks a lot for the tips! it was great.
Hey your blog is really very nice, Thanks for all the information you have posted.. :)
Jared Burns - Ya Da Man!
This mehod seemed to work best for my iPad site:
a:active, a:focus, input[type="image"] {
outline: 0;
}
Thanks for the post, the dotted line was driving me crazy!
As to the accessability options there are two other methods the people who rely on those borders can deal with sites removing it.
1. look at the status bar as to what the currently selected link does.
2. add to their own browsers CSS file :focus{border:1px dotted !important;} or whatever
which will override the sites CSS style
3. use the many inbuilt and third party accessibility tools that make computer use easier without mouse use (one of my favs is mouseless browsing plugin for firefox, assigns a number to each link that can be 'clicked' with the numpad)
Thanks buddy its a very nice information keep blogging such nice informations..
Hi Anne, The ReserveMyHome vacation rentals blog has come a long way but I am stuck! If you get a moment would you please go to the blog and notice the blue font. While I like the blue font, I would much rather have a black font. This is a WordPress blog.
Also, one more silly question for you. On most days I get about twenty or so people writing comments. Is there ANY WAY to prevent this from happening as it talk up so much of my time looking at posts not related to vacation rentals and the information I share there with real people looking for real help.
Your insight is very important. Please do respond.
Sincerely,
S
@S, I looked your template over and couldn't figure out how to change it. Your color is: #3D587D. I'm not familiar with WP templates, but perhaps if you look for that HTML color in your template you can find it.
Thanks for this info. Using all the methods described here, I still couldn't get rid of the outlines in Firefox 3.6.3
"Anonymous said...
The 100% working solution is to combine them both like this:
a:active, a:active * { outline: none !important; -moz-outline-style: none !important; }
a:focus, a:focus * { outline: none !important; -moz-outline-style: none !important; }
"
thanks so much to the person who suggested this! I tried quite a number of the proposed solutions and nothing was working, but now my problem is solved!
Thank you so much!
Thank you for the suggestion. I've had this problem for way too long.
GREAT! you may need to add your no-border css to the normal link css, as well as the "active" selector. i did.
Thank you great!!!
Hey there
This piece of information has helped me.
I've had this problem for way too long
Regards
I've had this problem for way too long
Hi
I was quite mad when i used to get those dotted lines. it just made crazy all the time but now i have the remedy. Quite happy to see it work on my IE7
Thanks for the article. I enjoyed reading it
Rregards
I have always wanted to know how to remove those darn dots in Firefox...
Thanks for the post.
Every good, i got rid of the border over my links, thanks i was looking for ages :)
Hi
Now i am convinced that i am going get rid of those dotted lines out. Finally i have overcome my greatest irritations.
Great resource.
Regards
Houston
thanks, really helpful)
thanks, those dots are a bane of my existence.
First thing I want to say is thanks for the answer, because I´ve been searching in google for this problem for about a month and I couldn´t repair it until I read this post.
Excellent blog guys!
Hey,
I finally got over those dotted lines once and forever. I could not believe i did it. Your post deserves the credit. Thanks a lot man.
Thank you for the post, i have been looking for it everywhere. Kudos!!!
Cheers
Fabulous! Bravo!
Love being to add a block of code like the proposed css, without having to modify a single element anywhere else in the entire site.
The code used, was as provided on its final iteration, and totally removed any "active hover dotted-line borders on image links." Here's what I used:
a:active, a:active * { outline: none !important; -moz-outline-style: none !important; }
a:focus, a:focus * { outline: none !important; -moz-outline-style: none !important; }
All I needed to do was just add to the site style.css. On the dp2a.org site, there are multiple style link definitions... but this code happened to address the issues across all active links.
Thank you for this wonderful timesaver aggregation!!
Thank you Annie!! I hope you will keep updating your content constantly as you have one dedicated reader here. I ll probably use those tips myself.
Just want to thank you.
I had to add:
a {
outline:none:
}
and I guess that different implementations has different CSS struggle (needs).
Best
Mulli
Thanks for this code. I never found any problem like that but I have bookmarked this post as it might help me out in future.
Thank you for the post, i have been looking for it everywhere. Kudos!!!
Thank for sharing,
Thanks for this!
I've been scouring the web for ages trying to figure this out, having completely forgotten the css syntax for this. Such a relief to come across a clear and simple answer, cheers
Firefox rules!! Thanks for the code and the dofollow booster shot!! ;)
I was having the same problem as Alain and stumbled across your site with exact keywords 'remove dotted border in firefox'. Thanks to you Annie, the headache has disappeared.
A nice write, great content and huge response.
Way to go, Good Luck & Best Wishes
Thanks for sharing such a great info.
great post..thanks
Wow! I did not know that it is so simple to remove the border. Thanks for sharing. You have been of a great help. :)
No more dotted border!!! Thanks :)
Aerial Photography - Aerial Viewpoint Ltd
Thanks for the code. Hereafter no more dotted lines. M6.Net Windows Hosting
thank you i was searching for this. no more borders!
Why would you want to do this?
Really impressed! Everything is very open and very clear explanation of issues. It contains truly information. Your website is very useful. Thanks for sharing. Looking forward to more!
Check My Ride
It drove me crazy trying to understand. But there must be a fix for IE6. Maybe I can find!
nice share....keep posting....thanks....
more information about gadgets...
http://popular-gadget.blogspot.com
Searching for solution and got this post, really nice helping post.
Nick the bet
Thanks for this helpfull advice re removing the border and other posts.
Tres cool,Annie. I love your site!! Thanks for so much help. Wish I had more time to learn your blog information but am too busy fixing computers at the moment. Thanks again.
Good tip! The simple ones are always the best ;)
Thank you for this post I have been trying to accomplish this for quite some time now.
For my case, all solution you propose doesn't works. This one make my day
input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner{
border : 0px;
}
(found here http://stackoverflow.com/questions/71074/how-to-remove-firefoxs-dotted-outline-on-buttons-as-well-as-links/199319#199319 )
a simple and direct code. thank you for that!
Ah, finally a solution to a stupid little problem I had on web hosting site of a client, a silly one that just irritates you before you find a solution!!
Thanks alot for this method. I'm very happy happy happy
You might have an add-on in firefox that highlights and puts a dotted box around nofollow and dofollow links.
I've never had this problem before with my 6 years of expereince on developing websites. However I never knew about using -moz- for example, "-moz-outline-style: none;".
I'll keep that in mind because its can come to use one of these days. :)
You might have an add-on in firefox that highlights and puts a dotted box around nofollow and dofollow links.
Thnz alot dear
It amazes me when I see the dotted border link on many famous Design sites – it looks horrible in my opinion . This is the very first thing I implement in my source -always !
Thanks
Just want to thank you.
I had to add:
a {
outline:none:
}
and I guess that different implementations has different CSS struggle (needs).
Annie,
Your blog is very helpful! This kind of tips works nice!!! Thank u so much!
I am not a coder so this info is very very helpful. I thank you. Though zofix said that the dotted lines are useful for some people but I think the bottom line is what your site is about. If you are catering them then I agree not to remove it. But if not, then you always have the option. Thanks for the code again.
thanks for the tips,it realy helps Adidasi
I like the way it is explained. Thanks for sharing this solution i would like to go for this . You tackle my solution as i was having a allergy to see that dots.
I Think You Should Go For Some Tutorial Offered On Internet.
I can't stand dotted borders, they drive me nuts.
This has helped me out greatly thanks.
Dotted borders makes your post unattractive, and pretty annoying to look at most of the time. I wonder who created them..
Great post ..!! I will try to my blog.
Visit on may blog, i have a nice blogger template. My template like magazine template.
Thank you for your sharing..
Have a nice day . . .^_^
Why is everybody still using firefox. Chrome is much faster!
Nice trick, thanks a lot fren :)
I love fire fox, it has some great Tools & I use it all time, thanks for the great post and tip for the dotted lines :)
thanks for the trik bro...
Nice trick..!
Thanks I've been wanting to know how to get rid of this for ages!! Will keep visiting this site for more info - Dyshidrotic Eczema
Hey this trick is really working.Thanks a lot for sharing.
As always at the height of your blog! I voshischina your merit. You are a great blogger.
thanks mam, you save my blog ^^
Hi,
I have gone through your article. It seems great. The matter is just awesome and very informative for the title. Keep the good work going. Hope that you would do great in upcoming time.
Really thanks for this great post
Gambling Basics
Use either of these CSS Styles
a:active, a:focus,input, input:active, input:focus{ outline: 0; outline-style:none; outline-width:0; }
a:active, a:focus,button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner
{ border: none; }
OR
:focus {outline:none;} ::-moz-focus-inner {border:0;}
Once the CSS Style part is done, then you might also need to set the IE-Emulator. Update your web applications web.config file and include below key.
Thanks, I really needed some CSS help. You saved me a lot of trouble!
Hi,
I was having same problem regarding dotted border links.Its good to see solution here.Thanks for information.
Regards,
Vanessa
Help everywhere, great blog
many thanks :)
great blog, thanks a lot !!!
Fridge Magnet
Thank you for helping me solve the FF border issue, it was driving me nuts this morning!
I'll try these,thank you for giving information.
Hey thanks for helping with these damm dotted borders
lån
Thank you very much for your help! I will try it!
i have always come across this problem. Might be bit of a tricky one but do you know how i can make my site full ssl so it doesnt keep saying there are insecure items?
Jolly
Thanks for the info, very useful, now I'm looking to remove the dots around the of flash.
Thanks for the help with the dotted borders I wasn't able to find a solution in the best browser Firefox. The new Firefox seems not to do it, but some features cannot work with it at this time, like the nofollow/dofollow feature.
Thanks for sharing this great post. It’s very enlightening. I absolutely love to read informative stuff. Looking forward to find out more and acquire further knowledge from here.
Thanks a lot for this tip and lots of the other ones. They have all proven really useful.
Thanks
Really awesome.. Since a long i have this problem.. Very useful tips.. Through this one i have solve that problem..
thanks for the info, so finally my flash buttons without double click.
thanks for the solution... was desperately searching for one.
Nice tips. Thanks for sharing... It's really helpful. :)
I was using IE for years then switched to Firefox and noticed the dotted lines. Thank you for the code post above. It helped 100%.
What a nice Website :)
Thanks for the tips so much!
Awesome! Thank you!
I tried your tips and they work. Thanks for the help.
I really love your attitude towards do follow, keep it up, thanks again :)
Thanks Annie, I've been trying to work out how to do this :) I don't use firefox so didn't realise they had the dotted line until one of my friends told me.
Annie - You truly have a way of simplifying any complicated process. I learn something new every time I visit your lovely site! Thanks for the tip! Regards from your SEO friend.
How is it possible that removing the dotted border is this simple? I have stuggled with this for a while now!You saved me Annie! This blog is packed full of useful SEO tips!I'll be sure to share it as much as I can.
Not working for me..any help???
thanks! great article continue doing helpful and informative ways for a simple blogger like me :P
Annie you hero.. Just what I needed to know.. thanks!
Brilliant thanks Annie, might actually encourage me to venture back to Firefox!
Annie you saved me so much time. I was tearing my head out trying to figure this out.
You have som every good tips on this website Annie. It has been a good resource for me. Thanks for that.
Best,
Johan @ Bee Pollen Benefits blog
Good post. Thank you for sharing.
Thank you, just what I was searching for!
"This sure is a solve though, what exactly 'outline' is used for?" was the question in my mind. Afterwards I checked what outline was but kind of got more confused...
What is the difference between border and outline? o.o
Well, really nice tip.
I had some trouble with this issue, used different fixes, but your is cleaner and quicker.
I found more info about firefox here
Again, thanks for the tip
omg, did you lot know you can add borders and change colours with css too. WOW
I was also facing the same problem. I have updated the css of my blog to get rid of dotted lines in firefox.
Is there any way of changing the border type on a table, I can get a thin black line by having a black filled table with new single cell white filled tables inside each cell of the main table but I would like to get that line dotted. I want to try not to use a background image if not possible. Any help would be greatly appreciated. Thanks.
Very useful tip, always i am irritated by these borders and your tip free by this problem. Thanks :)
Thanks a lot. I had the same problem with my css on the website
Elektromotoren Shop
Thanks, just been searching for how to do this and yours was the best answer, Thank you!! :)
Great tip!
It will help many beginners, congratulations on your work.
Thanks a lot Annie - I used this tip on my blog and now it works perfectly
You can see the results at http://www.cementcalculator.co
Hey Annie...Thanks again... this is the second great find today Going to keep my eye on this site! thanks again... Brye
I wouldn't recommend this, usability will suffer if you remove the borders.
WOW, thanks for Sharing this is just a perfect blog specially the way of your writing and defining your blog step by step is fantastic keep up with it
Hey Annie,
I tried your tips on Firefox and it does work out well. Thanks! You saved me :)
But why is not working with a {border:0px}?
I see that in last version of Firefox this problem is gone, somebody still have this problems!?
hi ,
thnk's for this solution
keep up the good work ^^
From a usability perspective: don’t use this! If people like to use their keyboard to navigate through your site, you’ve just succesfully removed their visual hint of which link is currently ‘active’ and ready to be ‘clicked’.
Intresting discussion on this page. I cant say that the dotted outlines have really bothered me too much before, but is always good to know that you can change design features round if you wanted too. I think the idea of using a different font/colour/underlining the link is possibly a more deisgn friendly way of enabling everyone to enjoy your website. Thank you for your help.
Great tip!
It will help many beginners, congratulations on your work.
Awesome.
I hate those dotted lines when building pages. Understand that it shows the user where they are but they are kinda annoying, and as they don't show in other browsers is there really a need for them. Users are pretty savvy these days.
Thanks for sharing the code, not everyone will use it but I sure will!
It amazes me when I see the dotted border link Thanks for such great post really helpful)
thanks for tutorial great
Thanks for your post, I was having the same problem but after reading your blog I solved it and your tutorials they are really useful
awesome Annie I cant tell how thankful I am for your helping post thanks.
Thanks for sharing such a useful information but I want to know that is it working on explorer also.
Its an useful help, I have applied this. Thanks to Annie
Thank you, just what I was searching for!
The site looks great and the time it takes to make a site we want to make sure its presentable and want others to easily navigate.
hey Annie nice code and almost exactly what I imagined, but it doesn't work in I explorer. I still get the dotted border around all links when they're active..
Thanks a lot Annie. That outline was always really annoying.
Thanks for the post. I have no idea why they even put that border on as default.
Hey, just found this site, great resource, looking forward to more articles..
great tips...thanks a lot !
Hi! I have used the HTML code at the bottom for my site and I really do love your site. You have inspired me to keep designing mine. Thanks.
Webmaster of breville juice fountain plus je98xl