Why is there a border on this table?

There seems to be a slight problem on this page ... there is a sliver of white.

enter image description here

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 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 tried everything to remove the tape. How can i do this?

Note: I cannot switch to DIVs - in fact, I originally used the DIV, but ran into some other problems.

+4
source share
2 answers

This is the descender space since the image is embedded. You can set it to lock.

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

Edit : Apply display:block; to all 2-3 images in the first row of the table. The value of #topbar_site img and #topbar_log img

+4
source

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

0
source

All Articles