How remove border around image in css ?

Question

Hi everobody,

I try to display a span when the cursor of the mouse is on a help icon.

It works, but nevertheless, I don't manage to remove the border around the icon.

My CSS :

.info{
    position:absolute;
    border:none;
}

a.info{
    position:absolute; 
    z-index:24; 
    background:none;
    color:#000;
    text-decoration:none
}

a.info:hover{
    z-index:25; 
    background-color:#FFF;
    cursor:help;
}

a.info span{
    display: none
}

a.info:hover span{ 
    display:block; 
    position:absolute;
    cursor:help;
    bottom:0px; 
    left:26px; 
    width:150px;
    padding:4px;
}

cd

Answer 1

Try this:

img{border:0px;}

You can also limitate the scope and only remove border on some images by doing so:

.myClass img{border:0px}

More information about the border css property can by found here.

Edit: as mentioned in the comments, you could also do :

img{border:0;}

Answer 2

What class do you have on the image tag?

Try this

<img src="/images/myimage.jpg" style="border:none;" alt="my image" />

Answer 3

I do believe you need to add the border: none style to your icon element as well.

Answer 4

maybe add border:none to under a.info:hover span or text-decoration:none

Answer 5

I usually use this on the top of css file.

img {
   border: none;
}

Answer 6

Thank for answers,

border is "destroy" (sorry for my english) under IE, but under FF, it still again. So, I try this :

.clearBorder{border:none;} and I add this class to the img, and it rules.

Answer 7

it's a good idea to use a reset CSS. add this at the top of your CSS file

img, a {border:none, outline: none;}

hope this helps