IMG Tag Remove Border

Question

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

On this page there is a blue box image that has a grey border around it. I\'ve been trying to remove the border without lu

Answer 1

I had this issue just now with the white border around my img tag. To resolve this I changed from <img /> to <object></object>. This allowed me to control the content style or background-image style without leaving the ugly white border. (Have to add below CSS)

object {
    border: none;
}

I know that this has been answered, however I hope it may come of use to someone else.

Answer 2

You have set a background image on an <img> tag. This is very bad practice.

My suggestion is to change your markup to the following: (Note the <span> instead of the <img> tag)

<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;
}

That should solve your problem.

Answer 3

There's no point using an <img> tag if you're going to use CSS background for the image. In an <img> tag the src attribute is used to specify the foreground image, and it is a mandatory attribute for this tag. Leaving it out will have unexpected results, such as the border effect you're seeing, but this may vary from browser to browser.

If you want to use CSS background-image, just use a different HTML tag (eg <div>).

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

The point here is semantics. An image in an <img> tag is assumed to be part of the content of the page, hence the image is specified in the HTML code, whereas by defining an image in CSS, you are saying that it is part of the design, and not content.

You should use the method which matches the purpose of your image in the site.

Answer 4

your image has no src attribute add a transparent.gif to the source and the border will disappear.

Example:

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

UPDATE:

Example for sprited background images on list elements. (In this case you have to rearrange the sprite into a vertical sprite)

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