Mysterious bottom border

Question

I promised to change the logo on an e-commerce site, though it'd take a few minutes, but it has taken many hours. So I'm hoping someone with more experience with CSS can help me out.

This is the site: http://varuosad.ee/

I can't seem to make the <tr> containing the image as high as the image (155px), no matter how high I make the image, the <tr> has a height exactly 2 pixels higher. From the 2 pixels I guessed it's the user agent style sheet with border-spacing: 2px, but overriding that didn't help.

This is the offending part (it's the block with language selection and the main logo):

<table class="table_right">
  <tbody>
    <tr>
      <td class="sub_row_1 bg_ylemine_riba">
        <a href="/">
          <img src="/assets/img/bg_ylemine_riba.jpg" alt="">
        </a>
        <a href="/changelanguage/en">
          <img class="lang_right" src="/assets/img/eng.gif" alt="">
        </a>
        <a href="/changelanguage/et">
          <img class="lang_left" src="/assets/img/est.gif" alt="">
        </a>
      </td>
    </tr>
    <tr>
      <td class="sub_row_2">
        <a href='/'>
          <img class='soov_logo' src='/assets/img/logo_uus.png'>
        </a>
      </td>
    </tr>
  </tbody>
</table>

I've tried these:

border: 0px;
border-spacing: 0px;
border: none;
border: 0 none;
border-width: 0px;
margin-bottom: -1px;
max-height: 155px;
height: 155px;

And many more different properties and values, but it seems like nothing overrides what I need to. Even worse, I don't really know what to override, I'm just guessing it's the border of the tr, td, a or img... Maybe it's the font size or something else entirely.

I'll be grateful for any reply. If it can't be done, it can't be done, I'll just give up and move on to web-sites not designed using tables.

Answer 1

Add vertical-align: top to the image. This space is the space below the baseline.