IMG tag Remove border

Question

http://www.flirtwithme.co/main.php#upgrade

This page has a blue frame with a gray frame around it. I am trying to remove a border without luck:

eg:

border: none; outline: none; 

the image is part of the sprite and there is no border around the image. Any ideas?

* Image - this is the image on the right - a blue box with a checkmark in it. (second at the top of the sprite.

Answer 1

your image does not have the src attribute, add .gif transparency to the source and the border disappears.

Example:

 <img class="benefitImg" id="iconPersonalizeProfile" src="http://upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif"> 

UPDATE:

An example for traced background images in list items. (In this case, you need to rebuild the sprite into a vertical sprite)

http://jsbin.com/ebovod/edit#html,live

Answer 2

It makes no sense to use the <img > tag if you intend to use a CSS background for the image. In the <img> the src attribute is used to indicate the foreground image and is a required attribute for this tag. Leaving this will have unexpected results, such as the border effect that you see, but it may differ from browser to browser.

If you want to use CSS background-image , just use another HTML tag (e.g. <div> ).

If you want to use the <img> , then you need to use the src attribute and not define it in CSS.

This is about semantics. It is assumed that the image in the <img> is part of the content of the page, so the image is indicated in HTML code, while when defining the image in CSS, you say that it is part of the design and not the content.

You should use a method that matches the purpose of your image on the site.

Answer 3

I only had this problem with a white border around my img tag. To solve this problem, I changed it from <img /> to <object></object> . This allowed me to control the content style or background-image without leaving the ugly white border. (Need to add below CSS)

 object { border: none; } 

I know that this has been answered, but I hope that it can be useful to someone else.

Answer 4

You have set the background image of the <img> . This is a very bad practice.

My suggestion is to change my markup to the following: (Pay attention to <span> instead of the <img> )

 <ul> <li> <span class="benefitImg" id="iconPersonalizeProfile"><span> Personalize your Profile using Custom Themes </li> </ul> 

And then apply these styles:

 #iconPersonalizeProfile { background: url("http://www.staticimages.co/seemeagain/upgrade-sprite.png") -35px -3px; display:block; width: 25px; height: 25px; float: left; } 

This should solve your problem.