css border problem

Question

For some reason I have a very ugly orange part of a border around a image.

Can anyone see why this is?

This is the HTML

<div class="preview">

            <a href="images/foto/full/280899624_6_5_j6.jpeg" title="Sportschool Raymond Snel" rel="lightbox"><img src="images/foto/full/280899624_6_5_j6.jpeg" alt="text" /></a>

</div>

This is the css

.preview {
    width: 85px; 
    height: 85px; 
    overflow: hidden;
    border: 3px solid #2e2a26;
    }

The color code = FF6a00 but appears only one time in the css file.

a {
    color: #ff6a00;
    text-decoration: none;
    border: 0px;
}

As you can see I already gave it a 0px, but for some reason the border is still there.

Answer 1

Try img { border: 0; }

Answer 2

Try the following CSS it will make sure any image inside a link doesn't get a border.

a img { border:0px;}

Answer 3

You'll want to remove the border on images instead of just on the anchor. The border is actually coming from images inside anchors so the following will fix it:

img{border:none;}

Answer 4

Try this:

.preview a img { border: 0px; }

Answer 5

The border is because the image is a link (think about how links are blue by default - the same applies to image links, they have a border by default).

This line will fix it

.preview a img {border: 0;}

Answer 6

Just try and put border="0" inside img tag. Let me know if that helps.

Answer 7

Try this:

.preview a:link img, .preview a:active img, .preview a:hover img, .preview a:selected img, .preview a:visited img{border-style:none;}