When I turn an image (<img>) into a hyperlink (by wrapping it in <a>), Firefox adds a black border around the image. Safari does not display the same border.
What CSS declaration would be best to eliminate the border?
Add a comment
|
5 Answers
img {
border: 0
}
Or old-fashioned:
<img border="0" src="..." />
^^^^^^^^^^
1 Comment
Matt Haughton
This solution helped me out a lot, wish I'd found it before the 2 hours of frustration! But I think using "a img{border: 0;}" is a better fitted solution to the original problem - the emphasis on the initial "a" because the problem only occurs when an image is wrapped in a hyperlink
Just add:
border: 0;
or:
a img {
border: 0;
}
to remove border from all image links.
That should do the trick.
Comments
in the code use border=0. so for example:
<img href="mypic.gif" border="0" />
within css
border : 0;
under whatever class your image is.
1 Comment
pilif
attention: Your <img> tag is not correct. Either you have to use " to quote the border attribute value (because XML requires that), or you have to remove the / before the ending > (because SGML/HTML doesn't allow that)
a img {
border-width: 0;
}
2 Comments
Bobby Jack
That's invalid CSS: '0' does not have a unit. Should just be "border-width: 0;".
Benubird
@BobbyJack Of course 0 needs a unit. Even if it can be derived from the context, all numbers (and 0 is a number) need a unit to be meaningful. The browser automatically adds the 'px' if you leave it off, cleaning up for your laziness - but it still needs to be there.
Try this:
img {
border-style: none;
}