Jeff Summers
  shares  Removing the Dotted Outline on Focused Links

| | Comments (1) | TrackBacks (0)

The next few postings are going to deal with a few miscellaneous aspects of your theme. These are minute details that could very easily be overlooked but will differentiate your theme from the other profiles that are out there. Individually they are not that impressive as say a new graphic or rounded corners but they are useful things to know about. If you are using a Firefox browser you may have noticed that the active link on the screen has a dotted line outline around it. This was done to differentiate it and give the user a visual cue of what they had clicked. If you you don't like that effect you can turn it off. The code to eliminate the outline is given below

/* Dotted line around active button in Firefox */
:-moz-any-link:focus {
    outline-style: none !important;
    outline-width: 0px !important;
}
/* End Dotted line around active button in Firefox */

As always I highly recommend that you comment your code so that you can remember what the block of code does if you need to go back and change it. Since this is just a single set of code we will go directly to the explanation of what each line does.

The element controlling this behavior is specific to any browser using the Mozilla rendering engine which would include Firefox and Netscape. Please make sure that you include the leading colon with this element. This is not standard CSS but rather an element specifically for one engine. The :focus qualifier at the end tells the system to only style the link that has been or is currently being acted upon. Within the element are two commands. The first command is the style of the outline. It defaults to "dotted". In our case we are setting it to "none" to make it invisible. The second command is the width of the outline. It defaults to 1 pixel but we are setting it to zero thereby making it invisible. I have added the "!important" qualifier to the end to make sure that no other commands take precedence over these that we are setting.

That's really all there is to removing the dotted line around the active link. You could make other changes if you prefer including modifying the background, adding an image, changing text color, etc. I just wanted to make it a little less obvious so I removed the outline completely.  Good luck and be sure to let everyone know you found this on Plurk Skins.

0 TrackBacks

Listed below are links to blogs that reference this entry: Removing the Dotted Outline on Focused Links.

TrackBack URL for this entry: http://plurkskins.com/cgi-bin/mt/mt-tb.cgi/27

1 Comments

This works great! Thank you for posting it!

Leave a comment

About this Entry

This page contains a single entry by Jeff Summers published on September 12, 2008 2:56 PM.

Theming the Page Title and Top Page Links was the previous entry in this blog.

Changing Sign-Up / Log-in Background is the next entry in this blog.

Find recent content on the main index or look in the archives to find all content.