Get rid of those ugly link outlines.

Get rid of those ugly link outlines.

Great web designs are everywhere now. With the explosion of online tutorial sites, blogs and social media there is a ton of information at new designers' fingertips. So with so much new talent out there you need to be able to stand out from the crowd. What makes a good design great for me? It's the little things that matter most. As designers we never seem to have enough time, but taking just a little extra time on details can go a long way in your design. Ugly link outlines are one thing in particular that I see quite a lot, even on some of my own stuff. Here are a few tips on how to get ride of those pesky eyesores

In firefox and other modern browsers it is easy. I simply add this to my css document: a:active, a:focus{outline: 0;}

Alright, so that's cool, but it looks like they are still hanging out in IE. Here is a javascript method I use for getting them to clear out in IE while maintaining usability for tabbed browsing.

$(document).ready(function() {
	$("a").keypress(function() {
			this.blur();
			this.hideFocus = false;
			this.style.outline = null;
	});
$("a").mousedown(function() { this.blur(); this.hideFocus = true; this.style.outline = 'none'; }); });

 

An important note to make is that some users rely on link outlines to navigate a page. Users that have disabilities restricting their use of a mouse rely on the keyboard or voice to navigate a page. Without a link highlight it is difficult for them to identify what link they are on. If you decide to use one of the methods above to remove the outlines just make sure it is necessary before you do.

Recent Posts

Magazines and much much more

Mar 09, 2011

So it's been a while since I had wrote a blog post so I thought I would finally take some time and let you know what I have been up to lately. I have been crazy busy to say the least and a lot of exciting projects...read more

Fix The Full Width Box-Shadow Bug

Oct 04, 2010

I recently ran into a problem where I wanted to use box-shadow to create a divider between a header and the content of a site. The div I was putting the shadow on was set to 100% width so the background...read more

Steve Mullen Interview

Apr 22, 2010

I was recently contacted by a college student and asked to answer a few questions for a class project. I figured since I already had it typed up I would share it on my site....read more

Destin Car Wrap Complete!

Mar 16, 2010

I recently designed my first car wrap for a client. It was a fun project and I was anxious to see the final result. I was a little nervous since I had never designed on before and the design was fairly complex....read more

More Posts

New Free Desktop Wallpaper

ITR Photo-shoot

New Addition!

Stop Designing in Photoshop. No thanks!

Behold Apple's iPad

Let it Snow Wallpaper: Download

Text layout in Photoshop using shape layers.

Powered by modx

Web Development: How I get it done

New Desktop Wallpaper

15 Inspirational Home offices

Color Profiles in Modern Browsers

Big Update!

Free Texture Pack #1

Run Your Old Add-Ons in FireFox 3.5

Downtown Tulsa - A Photographic Tour

Souled Out Website Launches!

Get rid of those ugly link outlines.

New Website Launched!



Need a website?

I am currently available to do freelance projects. However I am not available to do freelance work for other agencies. If you would like to consider me for your next project please contact me and tell me a little about your project. If you still need a little persuading take a look at my work.

Twitter Feed