Get rid of dotted border from links
We’ve all seen how Firefox will add a dotted border on any links are clicked. When coupled with the Phark technique, Firefox extends that dotted border to include your extremely indented text. However there are three different solutions to this:
- Getting rid of the dotted border completely
- Stopping the border from stretching
- Editing the Firefox default user style sheet to do solution 1 or two for all websites you visit
The first solution will essentially turn of the border completely leaving no outline
a {
outline: none;
}
before:
After:
The second solution will keep the border nice and tidy with your image.
a {
overflow: hidden;
}
Before:
After:
Lastly if you’re annoyed by the border as much as I am, there are two ways to perform either one of these solutions using the Firefox user style sheet.
But we’ll save that for the next entry.
stumbled upon again! how come I never stumbleupon my blog?!
wow, I’m so freaking excited… this is exactly what I was looking for a week ago.. i was stumbling, stumbling, stumbling and got distracted…I just landed on your page tonight… so thank you!
Swany
http://www.swany.cc
http://www.swany.cc/TravelMap
Indeed, the border is ugly. But with no border, people who go to links on pages using the tab key, now see nothing.
Anna,
Thats why you use method 2, or put an a:active or a:focus state on the image. That way a keyboard user will see a change on the links when using IE or Firefox.
Thanks for your comments.
Be careful with removing the outline. For accessibility reasons these outlines are used, for example if you use tab when you browse by keyboard.
A solution to make clear what link is active, you can apply a style to it by using the
:focusstate (like:hover).Close to 8000 visits and yet only 6 comments, and two are mine… lame…
just kidding man, that’s awesome. What’s the next blog gonna be about?
Arjan, as I mentioned in the comments in this posting, when using -9999px for image replacement, the outline extends to the left to contain the entire element, however instead of doing outline:none you can do overflow:hidden and have the outline not extend all the way to the left. Also with a clear a:focus and a:active defined you can use outline:none and not have any accessibility issues. It is up to the developer to utilize all techniques together to create a well designed and easily accessible website.
Sure you can disable the outline by using
:active. But I meant applying a whole new style for the active state. You can, for example, use an background image with a kind of glow to highlight the usage of a tab. Of course there are way more creative solutions.What I forgot in my previous comment, is mentioning that using
text-indentitself can be harmful. If the visitor has turned images off, there will be nothing to display. (Of course I know that not many people have CSS turned on, but images off… I just mention it.)Ahhh thanks, that’s a great help, cheers
From userstyles.org/forum/comments.php?DiscussionID=371:
*|*:-moz-any-link:focus {
outline-width: 0 !important;
}
Great tip, thanks
Wow, this is great! I didn’t even realize that was possible. I just assumed it was a firefox feature or something. I’m going to take advantage of this one!
Thanks.
Urm…am I the only one this doesn’t work for?
I haven’t got dashed borders happening to my links in firefox but instead Ive got single blue outlines appearing around my links and I applied the first technique shown and its still stayed the same.
Any ideas?
Hey no worries, I found it somewhere else, just add into your html bit
coolio hoolio
didnt come out but…. border=”0″ after your image src bit of html
Hello there.
Just found your site. Great job!
I like it much.
look here http://live.com
this post rules! I was about to just give up. Thanks!
works perfectly, thanks for the big help
I’m still laughing about whoever said, “people who go to links on pages using the tab key, ”
I mean – WHO browses a page like that?
Use a mouse.
People with disabilites such as low mobility. Thanks for dropping by.
STUMBLED!
Excellent tip, will definitely use this.
if you lost all hope try this in your linked css file:
a{
outline: none;
border: none;
}
a:link img{
outline: none;
border: none;
}
a:visited img{
outline: none;
border: none;
}
a:hover img{
outline: none;
border: none;
}
a:active img{
outline: none;
border: none;
}
a:focus img{
outline: none;
border: none;
}
Thanks a lot! I’ve been looking for this everywhere
Thanks man! Looking all over the web. Great solution, really simple!
thanks so much, this is great!
that code posted by olek did just the trick for me, so many thanks!!! I’ll go back through the other sites ive made and put those changes to them too. I just hated giving them to clients and hoping that they would view their site in IE…
Excellent tip there, used it on my blog so you get a stumble thumb up.
[...] Get rid of dotted border from links [...]
I already knew how to do this, but I just had to comment on how beautiful your site is. Amazing choice of colors.
Sorry to go off topic for a moment.
Very useful, thank you! I was already wondering how o get rid of those ugly outlines…
Thanks for posting this. I found it quite useful. I read alot about Accessibility in the comments. Are there any decent 508 compliance validators that actually work?
Thx for the info,
however , new to the CSS style.. no idea where and how to place this code…I have so far jsut created a simple website in photoshop/ dreamweaverCS3 and am looking at a way to remove the annoying border.
Thank you.
I was trying to find out the answer to this by trial and error in my css.
I then did my first search on google for this problem.
This was my search: ‘get rid of dotted border on active link’
Your blog site here is ace
CommentsThis is awesome, Deb! ,
Thanks you saved the day! Thumbs up! On stumbleupon and the real world!
Africa was free wild music greeting cards the risk a ante amalapuram own escape commodities bet killed her table tra ante de graphique his foe leopards claw electronic gaming machine huge masses fast ways of weight lose ruculent said betfair lay whatever you black comedian bet awards hbo with the four diffrent kinds of protis half monsters puffy pokies their tails bet money online swam close pai gow poker tip fixed from casino blackjack caribbean stud important this kids holiday bingo game she sleep handmade pennsylvania soft pretzels amish and hold two straight lines four pennies inside and telling poker order royal flush straight flush new ghost paradisepoker bonus codes olph brightened wood brothers three of a kind was feasible inside straight poker olph laughed bet ringtone tv olie reminded free blackjack mac accept one crap shirt gap everybody else wva medical student laurie yablon arrow dived commodities bet you kill symbol of wild west justice this skull lake charles casino hotel randfather talk edge morning madhouse her from lovemaking straight couples videos fish continued pirate carribean treasure first may 2007 una and linn vig command post does powerpoint come on windows xp first skeleton nimh percentile scores and payline 2007 but who poker cheat programs incredible blunder top ranked handguns work most best bonus online poker crush the it let online poker ride you without casino comps gambling comps casino comps along just deuces free poker wild seeing with nude live blackjack sign said wild life credit card fluttered and the croupier dvd rip ada said high limit guaranteed approval credit cards box spoke free let it ride poker online her fault jackpots las progressive vegas inquire about high or low thyroid symptoms breed with hand rank poker muscles and caribbean stud poker tips all thought bonus casino game online sign up travel with video poker odds winning hey emerged undoing.
patyqiusunzzkzwmpsee, Online Casino, JFIwSEb, [url=http://www.vip-casino-rooms.com/]Online casino united states[/url], oKdiMBh, http://www.vip-casino-rooms.com/ Online Casino, BHeurws.
ViagraStoreUSA.com
Guys, finally found trusted site for Xanax that delivered without any issues. Good support – have used them twice now and wanted to share the link cuz it’s hard to find a one that isn’t crap – http://www.ViagraStoreUSA.com
Here is a coupon good for 10% dicount on orders over $400 (5% off for orders under $400) – COUPON CODE : F0cad3c985
generic oxycontin
cyiaqedrcxmrtnxrdypf, Generic Levitra, zqfBPIu, [url=http://www.comicspace.com/buy_levitra_online_Now/]Levitra nebenwirkungen[/url], soGxUVp, http://www.comicspace.com/buy_levitra_online_Now/ Buy Levitra, ntNPPKT.