CODEWITHSUNDEEP
htmlcssimagefirefox
Benubird
Benubird

Reputation: 19497

how to get rid of firefox image border

I've recently added an image to my website, where the image is wrapped in an anchor tag, like this: .

The problem is, that this image has a border, but only in firefox; no border is showing in chrome. I want the border to go away. I have set in the css for both the a and img tags, the following:

text-decoration:none;
border-style:none;
border:none;
outline:none;
box-shadow: 0;
-moz-box-shadow:0;
background:none;
color:white;

The image is a small gray icon on a white background, and I have double checked it in gimp and there is definitely no border around the image. So, what have I missed? Where is it coming from? Why does it only appear in firefox? And how do I make it go away?

Firefox version is 17.0.1

Upvotes: 0

Views: 4538

Answers (2)

Benubird
Benubird

Reputation: 19497

Unbelievably, I found the answer - turns out that I had zoomed in, and I didn't notice because it was only by one. Wasn't until I went and pasted the entire contents of my page in jsfiddle that I noticed the sizes were marginally different.

Apparently, when firefox zooms in it adds borders to images. Can't imagine why, but once I zoomed out the borders went away. Problem solved, I guess. Just wish I'd found this sooner - it's been bugging me for days!

Upvotes: 2

thordarson
thordarson

Reputation: 6251

So, what have I missed?

The 90s and 00s.

Where is it coming from?

It's coming from the browser's default stylesheet.

Why does it only appear in firefox?

Browsers seem to make up their own rules on whether they display a border around linked images or not.

And how do I make it go away?

a img {
    border: none;
}

Upvotes: 4

Related Questions