tags:

views:

43

answers:

2

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.

+4  A: 

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

meder
Or set the image style to vertical-align: bottom; since it's sitting on the baseline
John Sheehan
As mentioned in my article.
meder
Yeah sorry, I saw that after I commented :) I personally like setting the alignment better than making it a block element.
John Sheehan
Ya, I'll agree with you there :)
meder
+1 I've come across that before, and it was a tricky to diagnose. It's a simple fix which works well.
Mike
Uh... see what happens now when I add the `vertical-align: bottom;`...
George Edison
You need to apply the fixes to all the image elements, not just one within that row...
meder
@meder: Great! Thanks!
George Edison
A: 

add cellpadding="0" and cellspacing="0" to the table element

guy schaller
Isn't this the same as setting `border-collapse: collapse` (for the TABLE) and `padding: 0px` (for each TD)?
George Edison
@George: Kind of, but not exactly, if just because of different bugs. FF fails to honor `tr.something { border-bottom: 1px solid black }` for multiple such `tr` following on another in a table with `border-collapse: collapse;` but it works fine with `cellspacing="0"`.
Christopher Creutzig