When you work with designers, it's very likely that sooner or later they'll come up with a web page design that uses multiple images that need to be joined together to form a display say something like this.
Where the yellow cell is actually where your content goes, and the cell below it is supposed to perfectly join up to the cell above to form a single unbreaking image. (Why does my sample suck? Because I can't draw! :P) But sometimes you'll end up with something like this. (The image below is simulated cause I can't get the error to show when I WANT it to! :P)
You'll see a gap between your supposedly perfectly joined cells (Usually about 1 pixel, I deliberately enlarged it so it's more visible right now).
Your HTML seems to be fine, with no additional cells, and the fact that you've already turned off cellpadding and cellspacing.
<table cellspacing="0" cellpadding="0" width="300">
<tr>
<td>
<div style="background-color: yellow">
I'm in a TD
</div>
</td>
</tr>
<tr>
<td>
<img src="footer.jpg" />
</td>
</tr>
</table>
So you're scratching your head wondering what went wrong. The next time you see a problem like this, remove ALL spaces between the TD tags. So essentially make your HTML look like this.
<table cellspacing="0" cellpadding="0" width="300">
<tr>
<td><div style="background-color: yellow">
I'm in a TD
</div></td>
</tr>
<tr>
<td><img src="footer.jpg" /></td>
</tr>
</table>
Why does it happen? I have no idea, but to fix the problem it's always the same thing. Remove all whitespace from the TD tags. If that still doesn't fix it or you're feeling paranoid, close up the TRs as well.
<table cellspacing="0" cellpadding="0" width="300">
<tr><td><div style="background-color: yellow">
I'm in a TD
</div></td></tr>
<tr><td><img src="footer.jpg" /></td></tr>
</table>
Again.. I have no idea why it just happens sometimes, but it does, and here's how I fix the problem. More little tips from the trenches to follow.