Brian Jackson's IT Blog » CSS Snippets http://blog.brianleejackson.com Wed, 28 Dec 2011 23:22:40 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Get rid of dashed box around links [hyperlinks] http://blog.brianleejackson.com/get-rid-of-dashed-box-around-links-hyperlinks http://blog.brianleejackson.com/get-rid-of-dashed-box-around-links-hyperlinks#comments Mon, 27 Jul 2009 07:32:29 +0000 Brian Jackson http://blog.brianleejackson.com/?p=388 ]]> A great easy improvement for any website is getting rid of that annoying dashed box that appears when clicking on a link. Many big sites like eBay.com and Google.com have not removed this dashed box from their hyperlinks and I think it just looks tacky. I understand that it might help some users understand that it is a link, but it also detracts from the design of the page. I think we have surpassed the age of tables and outlines, people know from common sense today where a link is and isn’t.

Here is a small snippet of CSS that you can add to your stylesheet that will remove the outlines [dashed box] from your hyperlinks. This is successful in Mozilla Firefox 2, 3, Internet Explorer 7, 8, and Safari 3, 4.

CSS REMOVE OUTLINES [DASHED BOX]: ADD TO BODY IN STYLESHEET

outline-color:-moz-use-text-color;
outline-style:none;
outline-width:0;

I think it is an easy way to add some class to your page. I implement this in every page I design. Below is an example of a dashed/outlined hyperlink box.

Hyperlink Outline Box - Dashed Box

Hyperlink Outline Box - Dashed Box

]]> http://blog.brianleejackson.com/get-rid-of-dashed-box-around-links-hyperlinks/feed 0