CODEWITHSUNDEEP
htmlcssimagefirefoxborder
user2415116
user2415116

Reputation: 777

Firefox shows blue box around image link

I have an anchor tag around all of these images on my site. When you click it, it scrolls to the id "template".

<a class="hi" href="#template"><img src="images/01.png" /></a>

I have tried every trick in the book.

a img{border:none; outline: none;}

border=0 in the image tag itself.

No matter what I do there's always a blue border around the image once you click it. Click any of the circle images (towards the bottom) for reference. Remember, to view in Firefox.

http://stevendennett.com/newsite/

Thanks!

Upvotes: 5

Views: 4369

Answers (5)

KoemsieLy
KoemsieLy

Reputation: 732

The dotted border around the image is the Outline of the <a> tag. So that, when you remove the border and outline in img it will not be the solution.

The solution is

We don't need to put to much code. Try here:

a { /* Remove all the outline border all in our document. */
   outline: none;
}

Upvotes: 6

jasonyork
jasonyork

Reputation: 251

I was able to remove the border by setting the anchor color to transparent:

a.hi {
  color: transparent;
}

Upvotes: 2

Sophea Phy
Sophea Phy

Reputation: 388

Try this:

a.hi {
    outline: medium none;
}

Upvotes: 1

Afzaal Ahmad Zeeshan
Afzaal Ahmad Zeeshan

Reputation: 15860

The image works fine in Chrome and Opera (15+).

So the issue that is happening is the default effect of the browser, here is what happens in FF.

enter image description here

And the IE (10):

enter image description here

But its fine in Chrome, which means that there is no such effect in CSS.

So you must try and add this :

a > img {
   border: 0;
}

It will remove the borders from all the images which are direct under the a hyperlinks.

Look at your code:

In your css file, on line 35 (if I am not wrong) you are having outline: medium none and border: medium none;

I removed that, and there was no border! Try it :)

Upvotes: 0

emerson.marini
emerson.marini

Reputation: 9348

Try this:

a.hi {
    outline: none;
    color: transparent;
    text-decoration: none;
}

Upvotes: 1

Related Questions