CODEWITHSUNDEEP
htmlcssimageborder
Ivelios
Ivelios

Reputation: 63

I can't remove border

I can't remove border from my images. I've tried many times with different atributes. Still see white border. If you have any suggestion what causes the problem - please explain to me. I'm kinda newbie.

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

Upvotes: 5

Views: 5116

Answers (6)

Tim Lagerburg
Tim Lagerburg

Reputation: 39

Change

border: none;

to

border: none !important;

This way it will override all the parent's declarations and thus has to work.

Upvotes: 1

Magnus
Magnus

Reputation: 389

It's because an img tag MUST have a src="" with a proper link otherwise it will be showing the image as a background like in your case (because of the css on the img) and a broken image on top of it

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

It's not a border, what you see is the broken image border.

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

Upvotes: 11

Marc Audet
Marc Audet

Reputation: 46825

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

The simplest way of doing this is as follows.

The 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 on the link (a tag) instead of an img tag, which is not needed.

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

Upvotes: 0

Timotheus0106
Timotheus0106

Reputation: 1586

maybe the border is not html given but its in your img ?

So open your image in an image program tool like photoshop and zoom to the places where the border is and have a look, if there is a border or not.

Upvotes: 0

kammy
kammy

Reputation: 352

  • Insert Image by using img src with proper height and width.
  • Use Paint or other tools to edit image. example.
  • make sure that your original image dont have any border, if it have simply select and crop the image.

Upvotes: 0

Slava
Slava

Reputation: 3107

That's probably because you have no src attribute on your img tags. I'd reccommend using transparent pixel as src in your case.

Upvotes: 0

Related Questions