Ooooh -- Table Cell Expands Unintentionally!

[mordie]

I have set my table cell #3 to 246px and have placed an image (called keyboard.jpg) with a width of 246px in it as a background image (the only cell in the table with an image), yet the table cell has expanded beyond that 246px width.I have to set the cellpadding to 5px because I need it for legibility for all the other cells in the table. Can I turn off the cellpadding for just this one cell #3 that has an image in it? Why does a background image in a table cell react to the table's cellpadding? Should I remove the keyboard.jpg as a background image and make it an in-table image?<em?Whatever the case, how can I make the image fit nicely without any extra space in the cell?</em>Here's my code and my stylesheet:<div id="table"> <table width="725" border="0" cellpadding="5" cellspacing="0" class="table"><tr> <td width="1"> </td><td class="cell1" width="130"><p><strong>Yada</strong></p><p>Bla bla bla</p><p>Bla bla bla</p></td><td class="cell2" width="124"><p><strong>Yada</strong></p><p>Bla bla bla</p></td><td class="cell3" width="246"></td><td class="cell4" width="174"><p><strong>Yada</strong></p><p>Bla bla bla<br /><br />Bla bla bla</p></td></tr><tr> <td class="tdblue"> </td><td class="cell5"><p><strong>Yada</strong></p><p>Bla bla bla</p></td><td class="cell6"><p><strong>Yada</strong></p><p>Bla bla bla</p></td><td class="cell7"><p><strong>Yada</strong></p><p>Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla</p></td><td class="cell8"><p><strong>Yada</strong></p><p>Bla bla bla</p></td></tr><tr> <td> </td><td class="cell9"><p><strong>Yada</strong></p><p>Bla bla bla Bla bla bla Bla bla bla</p></td><td class="cell10"><p><strong>Yada</strong></p><p>Bla bla bla Bla bla bla.</p></td><td class="cell11"><p><strong>Yada</strong></p><p>Bla bla bla Bla bla bla Bla bla bla Bla bla bla </p></td><td class="cell12" width="174"><p><strong>Yada</strong></p><p>Bla bla bla Bla bla bla Bla bla bla </p></td></tr></table>Here's my stylesheet:table {width: 760px;margin: auto;font-family: verdana, arial, sans-serif;font-size: 11px;font-weight: 400;line-height: 150%;text-align: left;text-decoration: none;letter-spacing: .5px;}table td {vertical-align: top;} td.cell1 {background: white;padding: 5;width: 130px;}td.cell2 {background: #F7F4EE;padding: 5;width: 124px;}td.cell3 {background: #ffffff;background-image: url(../images/keyboard.jpg);background-repeat: no-repeat;spacing: 0;padding: 0;width: 246px;}td.cell4 {background: #F7F4EE;padding: 5;width: 174px;}td.cell5 {background: #DFE5F0;padding: 5;width: 130px;}td.cell6 {background: white;padding: 5;width: 124px;}td.cell7 {background: #DFE5F0;padding: 5;width: 246px;}td.cell8 {background: white;padding: 5;width: 174px;}td.cell9 {background: white;padding: 5;width: 130px;}td.cell10 {background: #F7F4EE;padding: 5;width: 124px;}td.cell11 {background: white;padding: 5;width: 246px;}td.cell12 {background: #F7F4EE;padding: 5;width: 174px;}.tdblue {background: #DFE5F0;}.tdtan {background: #F7F4EE;}

[Little Goat]

first, you don't have to put the width in the html and the css. only one.backgrounds should not be affected by the cellpadding, or at least I thought they wouldn't .LG