One of the basic tricks I learned while playing with CSS is how to remove the outline that linking with an image will create. When you create a text link, the default color the link appears in is blue. Well, with an image link, you get a blue outline around the image. Obviously this can be an issue if it doesn’t flow with your design. So how do you get your image to stay a link but remove the link outline? Simply add this code to your CSS:
a img { display:none; }
This will single out any images (img) that are also linked through “a tags”. The CSS condition tells any linked images to not display the fact that they are links which effectively hides the blue outlines from the image. This will not effect regular images without links.
3 Users Responded In This Post
Actually…no. This tells the browser not to show images. (Found this out the hard way.)
I believe what I was trying to say was this:
a img { border:none; }
And actually, if you want to get technical, the previous code will display none on linked images only. Regular images will be safe, but if for some reason you would have to, (say you’re using an odd template) you can still define your normal IMG’s to show properly.
Ah, so simple. Sometimes you just forget to do these things… Thanks for the post.
Leave A Reply