How to get rid of link borders when working with linked images?

This image describes it all:

As you can see, there is a border under each image, but not to the left or right.

Also you can see, I marked the link-tag in the inspector and it shows a frame from approximately the middle of the image till under the picture including the unwanted border.

I already removed the text-decoration from the link, but this didn't changed a thing.

As most didn't get the root of the problem, here a larger version of the screenshot: http://imageshack.us/f/10/screenshotfgi.png/ Follow the link and click again on the picture you get.

Look at the blue box in the lower right. It is marked by Chrome as I selected 开发者_JAVA百科the hyperlink-tag in the inspector. Here you can see, the hyperlink causes the border/space. How to get rid of this space by changing the hyperlink-tag's style?

---

i had similar problem.

set line-height: 0 for anchors or td's.

#your_id table a, #your_id table td {
    line-height: 0;
}

or manually set height of a or td.

#your_id table a, #your_id table td {
    height: 30px;
}
#your_id table a {
    display: block;
}

both ways work for me.

---

That isn't a border, that is a space.

Images, by default, site on the same line as letters like a, b, c and d. There is space below that line for the descenders you find on letters like g, j, and y.

Set the CSS vertical-align property to move the image on that line.

---

Remove an image's border when it is linked without resorting to border="0":

a img {
    text-decoration: none;
    border: 0 none;
    }

Doesn't seem to be your issue though.

EDIT: Check the cellpadding/cellspacing of your table. There's some kind of padding or margin being applied to your cells.

---

Since your are using a table that might be due to the cellspacing property.

Set:

<table cellspacing="0" cellpadding="0">

on your table. The border that appears when img is in a link is usually blue color.

EDIT: Another thing that could mess up could be vertical-align. I think the default is set to baseline - try setting your vertical align to vertical-align:top on both td and img inside a

---

It's hard to tell without a piece of sample code...

I'd say start with resetting all properties that could've caused this:

table {
    border-collapse: collapse;
}
table, tr, th, td {
    border: 0;
    padding: 0;
}
td, td a {
    line-height: 0;
    white-space: normal
}
td, a, td a img {
    border: 0;
    padding: 0;
    margin: 0;
}

Does that help?