How to remove dotted border from links in Firefox

Here is an email from a reader, Alain, with a problem:
Hi Annie,

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?
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 { }) :
a:active
{
outline: none;
}

a:focus
{
-moz-outline-style: none;
}
No more dotted borders!

To remove post image borders is explained in How to Remove or Change Image Borders

post signature

219 comments:

  1. cool and helpful tips! care to ex links?

    ReplyDelete
  2. @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!

    ReplyDelete
  3. 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.

    ReplyDelete
  4. 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.)

    ReplyDelete
  5. @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!

    ReplyDelete
  6. 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

    ReplyDelete
  7. @zoffix, As a matter of fact, I am all happy about this code! Sorry if you don't share my enthusiasm.

    ReplyDelete
  8. @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.

    ReplyDelete
  9. P.P.S: s/Todays/Today's/;

    ReplyDelete
  10. @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.

    ReplyDelete
  11. 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.

    ReplyDelete
  12. 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.

    ReplyDelete
  13. 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;
    }

    ReplyDelete
  14. @Jared Burns, Thanks for another solution!

    ReplyDelete
  15. No problem. Actually, this is even better...

    a:active, a:focus, input[type="image"] {
    outline: 0;
    }

    ReplyDelete
  16. @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!!

    ReplyDelete
  17. Thanks Annie

    I've been scratching my head all day over that one - it really looks loads better without that annoying border

    Cheers Enrico

    ReplyDelete
  18. 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.

    ReplyDelete
  19. Cool stylesheet man i am very much thankful to everybody this is very much helpful for me for hold a client

    ReplyDelete
  20. 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?

    ReplyDelete
  21. @Russ, try:

    .post-title a, .post-title a:visited, .post-title strong
    {
    outline: none;
    }

    a:focus
    {
    -moz-outline-style: none;
    }

    ReplyDelete
  22. thanks annie.

    still can't get it though. the firefox dotting is only on my timestamp permalink, nowhere else.

    very frustrating.

    ReplyDelete
  23. 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!

    ReplyDelete
  24. @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.

    ReplyDelete
  25. 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.

    ReplyDelete
  26. @jase, WOW, thanks for another option. I don't think I would of figured it out.

    ReplyDelete
  27. 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.

    ReplyDelete
  28. 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

    ReplyDelete
  29. Thank you! That's real helpful.

    ReplyDelete
  30. Hi,

    I had this dotted border on image link. Your tips helped me to solve. It works great.

    Thanks.

    Thomas Antonymuthu

    ReplyDelete
  31. Billiant! Thanks very much. LondonPop

    ReplyDelete
  32. Thanks for such a nice tip

    really helped me alot

    many thanks :)

    stay happy
    peace

    ReplyDelete
  33. Thank you so much!! I was baffled, but you solved my problem with this. Cheers.

    ReplyDelete
  34. 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!

    ReplyDelete
  35. Haha.. this is amazing. those dotted borders have been bothering me since day 1.. thanks for this

    ReplyDelete
  36. 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.

    ReplyDelete
  37. 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!

    ReplyDelete
  38. 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.

    ReplyDelete
  39. Thanks so much for sharing, it worked like a charm :)

    ReplyDelete
  40. That's great, thank you.

    ReplyDelete
  41. Thx that helped me remove the problem from my directory links

    ReplyDelete
  42. 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; }

    ReplyDelete
  43. Than you Annie. saved my time.

    ReplyDelete
  44. mann you saved my day! thnx a lot! :)

    ReplyDelete
  45. Thank you! Such a simple solution!

    ReplyDelete
  46. 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!!

    ReplyDelete
  47. it's not working for image links !

    elijah

    ReplyDelete
  48. Thanks so much!

    ReplyDelete
  49. It doesn't work for FF 3.6.3

    ReplyDelete
  50. 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.

    ReplyDelete
  51. 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!

    ReplyDelete
  52. Thanks a lot for the tips! it was great.

    ReplyDelete
  53. Hey your blog is really very nice, Thanks for all the information you have posted.. :)

    ReplyDelete
  54. Jared Burns - Ya Da Man!

    ReplyDelete
  55. 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!

    ReplyDelete
  56. 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)

    ReplyDelete
  57. Thanks buddy its a very nice information keep blogging such nice informations..

    ReplyDelete
  58. 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

    ReplyDelete
  59. @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.

    ReplyDelete
  60. Thanks for this info. Using all the methods described here, I still couldn't get rid of the outlines in Firefox 3.6.3

    ReplyDelete
  61. "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!

    ReplyDelete
  62. Thank you for the suggestion. I've had this problem for way too long.

    ReplyDelete
  63. GREAT! you may need to add your no-border css to the normal link css, as well as the "active" selector. i did.

    ReplyDelete
  64. Thank you great!!!

    ReplyDelete
  65. 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

    ReplyDelete
  66. 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

    ReplyDelete
  67. I have always wanted to know how to remove those darn dots in Firefox...

    Thanks for the post.

    ReplyDelete
  68. Every good, i got rid of the border over my links, thanks i was looking for ages :)

    ReplyDelete
  69. 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

    ReplyDelete
  70. thanks, really helpful)

    ReplyDelete
  71. thanks, those dots are a bane of my existence.

    ReplyDelete
  72. 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!

    ReplyDelete
  73. 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.

    ReplyDelete
  74. Thank you for the post, i have been looking for it everywhere. Kudos!!!
    Cheers

    ReplyDelete
  75. 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!!

    ReplyDelete
  76. 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.

    ReplyDelete
  77. 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

    ReplyDelete
  78. 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.

    ReplyDelete
  79. Thank you for the post, i have been looking for it everywhere. Kudos!!!

    ReplyDelete
  80. 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

    ReplyDelete
  81. Firefox rules!! Thanks for the code and the dofollow booster shot!! ;)

    ReplyDelete
  82. 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.

    ReplyDelete
  83. A nice write, great content and huge response.
    Way to go, Good Luck & Best Wishes

    ReplyDelete
  84. great post..thanks

    ReplyDelete
  85. Wow! I did not know that it is so simple to remove the border. Thanks for sharing. You have been of a great help. :)

    ReplyDelete
  86. Thanks for the code. Hereafter no more dotted lines. M6.Net Windows Hosting

    ReplyDelete
  87. thank you i was searching for this. no more borders!

    ReplyDelete
  88. Why would you want to do this?

    ReplyDelete
  89. 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

    ReplyDelete
  90. It drove me crazy trying to understand. But there must be a fix for IE6. Maybe I can find!

    ReplyDelete
  91. nice share....keep posting....thanks....

    more information about gadgets...
    http://popular-gadget.blogspot.com

    ReplyDelete
  92. Searching for solution and got this post, really nice helping post.

    ReplyDelete

  93. Nick the bet


    Thanks for this helpfull advice re removing the border and other posts.

    ReplyDelete
  94. 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.

    ReplyDelete
  95. Good tip! The simple ones are always the best ;)

    ReplyDelete
  96. Thank you for this post I have been trying to accomplish this for quite some time now.

    ReplyDelete
  97. 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 )

    ReplyDelete
  98. a simple and direct code. thank you for that!

    ReplyDelete
  99. 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!!

    ReplyDelete
  100. Thanks alot for this method. I'm very happy happy happy

    ReplyDelete
  101. You might have an add-on in firefox that highlights and puts a dotted box around nofollow and dofollow links.

    ReplyDelete
  102. 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. :)

    ReplyDelete
  103. You might have an add-on in firefox that highlights and puts a dotted box around nofollow and dofollow links.

    ReplyDelete
  104. Thnz alot dear

    ReplyDelete
  105. 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

    ReplyDelete
  106. Just want to thank you.
    I had to add:
    a {
    outline:none:
    }
    and I guess that different implementations has different CSS struggle (needs).

    ReplyDelete
  107. Annie,

    Your blog is very helpful! This kind of tips works nice!!! Thank u so much!

    ReplyDelete
  108. 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.

    ReplyDelete
  109. thanks for the tips,it realy helps Adidasi

    ReplyDelete
  110. 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.

    ReplyDelete
  111. I Think You Should Go For Some Tutorial Offered On Internet.

    ReplyDelete
  112. I can't stand dotted borders, they drive me nuts.

    ReplyDelete
  113. This has helped me out greatly thanks.

    ReplyDelete
  114. Dotted borders makes your post unattractive, and pretty annoying to look at most of the time. I wonder who created them..

    ReplyDelete
  115. 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 . . .^_^

    ReplyDelete
  116. Why is everybody still using firefox. Chrome is much faster!

    ReplyDelete
  117. Nice trick, thanks a lot fren :)

    ReplyDelete
  118. 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 :)

    ReplyDelete
  119. 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

    ReplyDelete
  120. Hey this trick is really working.Thanks a lot for sharing.

    ReplyDelete
  121. As always at the height of your blog! I voshischina your merit. You are a great blogger.

    ReplyDelete
  122. 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

    ReplyDelete
  123. 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.

    ReplyDelete
  124. Thanks, I really needed some CSS help. You saved me a lot of trouble!

    ReplyDelete
  125. Hi,
    I was having same problem regarding dotted border links.Its good to see solution here.Thanks for information.

    Regards,
    Vanessa

    ReplyDelete
  126. Help everywhere, great blog
    many thanks :)

    ReplyDelete
  127. Thank you for helping me solve the FF border issue, it was driving me nuts this morning!

    ReplyDelete
  128. I'll try these,thank you for giving information.

    ReplyDelete
  129. Hey thanks for helping with these damm dotted borders
    lån

    ReplyDelete
  130. Thank you very much for your help! I will try it!

    ReplyDelete
  131. 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

    ReplyDelete
  132. Thanks for the info, very useful, now I'm looking to remove the dots around the of flash.

    ReplyDelete
  133. 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.

    ReplyDelete
  134. 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.

    ReplyDelete
  135. Thanks a lot for this tip and lots of the other ones. They have all proven really useful.
    Thanks

    ReplyDelete
  136. Really awesome.. Since a long i have this problem.. Very useful tips.. Through this one i have solve that problem..

    ReplyDelete
  137. thanks for the info, so finally my flash buttons without double click.

    ReplyDelete
  138. thanks for the solution... was desperately searching for one.

    ReplyDelete
  139. Nice tips. Thanks for sharing... It's really helpful. :)

    ReplyDelete
  140. 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%.

    ReplyDelete
  141. I tried your tips and they work. Thanks for the help.

    ReplyDelete
  142. I really love your attitude towards do follow, keep it up, thanks again :)

    ReplyDelete
  143. 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.

    ReplyDelete
  144. 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.

    ReplyDelete
  145. 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.

    ReplyDelete
  146. Not working for me..any help???

    ReplyDelete
  147. thanks! great article continue doing helpful and informative ways for a simple blogger like me :P

    ReplyDelete
  148. Annie you hero.. Just what I needed to know.. thanks!

    ReplyDelete
  149. Brilliant thanks Annie, might actually encourage me to venture back to Firefox!

    ReplyDelete
  150. Annie you saved me so much time. I was tearing my head out trying to figure this out.

    ReplyDelete
  151. 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

    ReplyDelete
  152. Good post. Thank you for sharing.

    ReplyDelete
  153. Thank you, just what I was searching for!

    ReplyDelete
  154. "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

    ReplyDelete
  155. 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

    ReplyDelete
  156. omg, did you lot know you can add borders and change colours with css too. WOW

    ReplyDelete
  157. I was also facing the same problem. I have updated the css of my blog to get rid of dotted lines in firefox.

    ReplyDelete
  158. 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.

    ReplyDelete
  159. Very useful tip, always i am irritated by these borders and your tip free by this problem. Thanks :)

    ReplyDelete
  160. Thanks a lot. I had the same problem with my css on the website
    Elektromotoren Shop

    ReplyDelete
  161. Thanks, just been searching for how to do this and yours was the best answer, Thank you!! :)

    ReplyDelete
  162. Great tip!
    It will help many beginners, congratulations on your work.

    ReplyDelete
  163. 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

    ReplyDelete
  164. Hey Annie...Thanks again... this is the second great find today Going to keep my eye on this site! thanks again... Brye

    ReplyDelete
  165. I wouldn't recommend this, usability will suffer if you remove the borders.

    ReplyDelete
  166. 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

    ReplyDelete
  167. Hey Annie,
    I tried your tips on Firefox and it does work out well. Thanks! You saved me :)

    ReplyDelete
  168. But why is not working with a {border:0px}?

    ReplyDelete
  169. I see that in last version of Firefox this problem is gone, somebody still have this problems!?

    ReplyDelete
  170. hi ,
    thnk's for this solution

    keep up the good work ^^

    ReplyDelete
  171. 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’.

    ReplyDelete
  172. 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.

    ReplyDelete
  173. Great tip!
    It will help many beginners, congratulations on your work.

    ReplyDelete
  174. 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!

    ReplyDelete
  175. It amazes me when I see the dotted border link Thanks for such great post really helpful)

    ReplyDelete
  176. 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

    ReplyDelete
  177. awesome Annie I cant tell how thankful I am for your helping post thanks.

    ReplyDelete
  178. Thanks for sharing such a useful information but I want to know that is it working on explorer also.

    ReplyDelete
  179. Its an useful help, I have applied this. Thanks to Annie

    ReplyDelete
  180. Thank you, just what I was searching for!

    ReplyDelete
  181. 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.

    ReplyDelete
  182. 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..

    ReplyDelete
  183. Thanks a lot Annie. That outline was always really annoying.

    ReplyDelete
  184. Thanks for the post. I have no idea why they even put that border on as default.

    ReplyDelete
  185. Hey, just found this site, great resource, looking forward to more articles..

    ReplyDelete
  186. great tips...thanks a lot !

    ReplyDelete
  187. 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

    ReplyDelete

Due to,happily, a steadily increasing readership, I'm not able to answer or solve all comments/problems. I do keep track of them and answer what I can as time allows. This is my attempt to balance home and blog.

To add a link in this comment, copy and paste this code in the comment window: <a href="URL">seen on post</a>
Change URL and seen on post. For instance, to have a link to BlogU, the code would look like this: <a href="http://bloggeruniversity.blogspot.com">
BlogU</a>
To use the DOFOLLOW attribute on this blog, please remember to use the NAME/URL option when commenting rather than linking to your profile page for more exposure!