Here’s a really annoying problem that we often hear people asking about: how do I get rid of a blue border that surrounds an image when I make the image a link?
Annoying blue border around a linked image
Some people will tell you to simply set a zero border in the Dreamweaver Property inspector, but according to David Powers, you should really use CSS instead.
Here’s how to do it:
- Create a new CSS rule for linked images, either in the head of the document or in an external style sheet. (We recommend the latter.)
The new rule looks like this:
a img { border: none; }
Note: If you don’t know anything about creating CSS rules, you’ll need to read up on some basic CSS info first. - If you’ve created the rule in a
<style>block in the head of your document, you don’t need to do anything else. If you’ve created the rule in an external style sheet, make sure the sheet is linked to the page that’s displaying the annoying border.
Creating a CSS style to remove borders automatically removes the blue border from ALL images that you’ve turned into links. If you use an external style sheet, and link it to all the pages in your site, the same rule affects every image link in your site. This is a much more efficient method of eliminating those pesky borders than adding zero to the border property for every image in your website!
Thanks to David Powers, who originally posted this helpful tip in the Adobe Dreamweaver Forum.
Comments
How about the dotted line I get around linked images slices in navigation areas? Is there a universal css snippet to get rid of those?
Thanks.
The dotted line around links is known as a focus rectangle. It’s there to help people who rely on using the keyboard rather than a mouse to navigate around a site, usually as a result of disability. The dotted line serves as a vital visual clue telling the user “you are here”. Removing the focus rectangle without compensating for it with another visual clue renders your site inaccessible to keyboard surfers, which could leave you open to a disability discrimination suit in many parts of the world.
Fortunately, it’s relatively easy to remove the dotted line and replace it with a more aesthetic visual clue. For example, you can give the outline a custom colour like this:
a:focus {
outline-color: #008080;
}
Choose a colour that stands out sufficiently, but blends in with your design.
Alternatively, use the same style as the :hover pseudo-class. For example:
a {
outline: none;
}
a:hover, a:active, a:focus {
color: #8E2800;
text-decoration: underline;
}
This ensures that when someone tabs to the link, it’s styled the same way as when a mouse is hovered over it.
Thanks.
I have created a new CSS rule:
a img { border: none; }
It has not fixed the problem. It looks fine in Dreamweaver, but it does not work in the browser. I have also tried closing the browser and opening it back up to refresh, which does not work.
Thx man, this was driving me crazy, and such an easy fix
Totally worked!
Thank you!!!!
Thanks you so much! I tried the zero border thing and it just caused more problems in browsers like IE. I put this rule at the top of my CSS and all the problems went away.
Great simple fix, thank you!
Thanks. Easy fix. This was driving me crazy.