Question

On this page, there seems to be a small problem… there’s a sliver of white showing.

Here is the relevant HTML:

<table id="topbar"> 
 <tr> 
  <td id="topbar_logo"> 
   <a href="http://stackmobile.com/" style='padding: 0px;'>
    <img src='images/logo.png'
         style='width: 48px; height: 40px; border: 0px; margin: 0px;' />
   </a> 
  </td> 
  ...
 </tr> 
</table>

…and the CSS:

#topbar {
    width: 100%;
    border-collapse: collapse;
    background-image: url(images/top_bg.png);
    background-repeat: repeat-x;
    height: 40px;
    margin: 0px;
}

#topbar_logo {
    padding: 0px;
    width: 48px;
    height: 40px;
}

I’ve tried everything to get the sliver to go away. How can I do it?

Note: I cannot switch to DIVs – in fact, I was originally using DIVs but ran into some other problems.

Answer 1

It’s descender space since the image is inline. You can set it to block.

http://work.arounds.org/mysterious-white-space-gap-under-image-elements/

Edit: Apply display:block; to all 2-3 images on the first table row. Meaning #topbar_site img and #topbar_log img