Geek Answers Handbook

I can not remove the border

I cannot remove the border from my images. I tried different attributes many times. Still see the white border. If you have any suggestions that are causing the problem, please explain to me. I'm new at this.

<head> <style> img{ border : none; text-decoration: none; } #forum { background:url(forum_button.png) 0px 0px no-repeat; width: 300px; height: 81px; } #forum:hover { background:url(forum_button.png) -300px 0px no-repeat; width: 300px; height: 81px; } #facebook { background:url(social_buttons.png) 0px 0px no-repeat; width: 29px; height: 29px; } #facebook:hover { background:url(social_buttons.png) 0px -33px no-repeat; width: 29px; height: 29px; } #twitter { background:url(social_buttons.png) -31px 0px no-repeat; width: 29px; height: 29px; } #twitter:hover { background:url(social_buttons.png) -31px -33px no-repeat; width: 29px; height: 29px; } </style> </head> <body style="background:url(landing.png) no-repeat top #111111; width: 1280px; height: 1024px; border:0;"> <a href="#"><img id="forum" /></a> <div id="social"> <a href="#"><img id="facebook"></a> <a href="#"><img id="twitter"></a> </div>
+4
source share
6 answers

This is because the img tag MUST have src = "" with the appropriate link, otherwise it will show the image as a background, as in your case (due to css on img) and a broken image on top of it

 ="#"><img id="facebook"></

This is not the border that you see, this is the broken border of the image.

If you want to keep your code, change the img tag to a div.

+6
source

Edit

 border : none;

to

 border : none !important;

That way, it will override all parent ads, so it should work.

+1
source

Maybe the border is not specified by html, but its in your img?

So open your image in a graphics program tool like Photoshop, and zoom in to where the border is, and see if there is a border or not.

0
source

Probably because you do not have the src attribute in the img tags. I would recommend using a transparent pixel as src in your case.

0
source
  • Insert image using img src with correct height and width.
  • Use Paint or other image editing tools. example.
  • make sure your original image has no border if it just selects and crop the image.
0
source

You are trying to set an icon image on a link using a background image that can be moved to a hover event.

The easiest way to do this:

HTML can be as simple as:

 <a class="test" id="test" href="#"></a>

and apply the following CSS:

 .test { background: beige url(http://placekitten.com/50/50) center center no-repeat; display: inline-block; width: 50px; height: 50px; border: none; }

Apply the background image to the link ( a ) tag instead of the img tag, which is not needed.

See demo at: http://jsfiddle.net/audetwebdesign/qAeHL/

0
source

More articles:


All Articles