background image weird behaviour in FF

[tblazquez]

Here's a sample of the CSS and html

.content-table {
width: 750px;
}

.left-content {
background-image: url(../images/bg-left-content.gif);
background-repeat: repeat-y;
width: 450px;
}

.right-content {
background-image: url(../images/bg-right-content.gif);
background-repeat: repeat-y;
width: 300px;
}


<table class="content-table" cellspacing="0">
<tr>
<td class="left-content">some text</td>
<td class="right-content">some text</td>
</tr>
</table>

the background images are white with one pixel on the left and right side that are grey to simulate borders (I have to do it this way, can't use border styles, and can't use divs).

in IE it shows correctly, but in FF the grey pixel on the right of the left background image doesn't appear. Now, I've played around with it, and it seems that the right <td> overlaps that one pixel on the left <td> in FF. If I change .right-content like:

.right-content {
background-image: url(../images/bg-right-content.gif);
background-repeat: repeat-y;
width: 299px;
}

the background image on the left column actually displays fine in FF and IE. However it's not logical to me, because I am missing one pixel, unless 299 + 450 somehow equals 750..
This is a mostly rethorical question since I fixed it, but I'd like to know if that behaviour is to be expected from Firefox or if this is just a bug ?

Note: I also tried background-image: url("../images/bg-right-content.gif"); as someone suggested and it doesn't change a thing.

[jscheuer1]

Most likely, FF has it right and IE has it wrong. FF takes into account borders and padding, the default cellpadding for a table (or maybe it is the default cellspacing) is 1px. This is true in IE and in FF but only FF actually uses these in calculating backgrounds.