CSS-Remove outline around active image
|
| 
There
is a very popular annoyance in the world of web design that most
would not even notice but some, like myself find unacceptable when it
comes to the overall quality control of a web page. The annoyance, a
little outline that appears around the border of the image very
similar to the outline that you may sometimes see around an embedded
flash object when clicking on it. This annoyance manifests itself
when clicking on the object that has been made a URL or on the
MOUSE_UP of the active object. Although I am not 100% for sure I feel
pretty comfortable in saying that this issue only appears in Fire Fox
and not other browsers. Let me remind everyone that I am not talking
about a "border" that typically shows up around an image that is
URL'd. It is important to note that this outline is especially annoying when using 
for your URL. This is because when using such a command you aren't redirected anywhere so the outline is especially noticeable.
See the image below to view the actual outline I speak of.
Open up the following link in your Fire Fox browser and click on the image. You will see the outline appear.
Since this tutorial is about how to remedy this using CSS lets get down to business.
Since there are more than a few ways the outline could appear on different states of the object lets use a wild card in our CSS. The wild card will select ALL elements within that portion of the DOM. Just like in other programming languages the wild card symbol is the asterisk(*).
If you are not using an external style sheet then somewhere between the <head> and </head> tags go ahead and open and close a CSS tag, and between the tags type in your syntax:
|
<style type="text/css"> *{outline:none;} </style> |
Note the wild card *
Now open up this link in Fire Fox to see that the outline is no longer there, thanks to CSS.
And that's it! Simple as pie!
