I am in charge of a complete visual redesign for our Web-based
application. Unfortunately, I've run in to a small, yet irritating
snag. We're using a lot of oldschool table layouts mixed in with
newschool XHTML, css-based layouts. Fortunately, hundreds of the
existing table layouts have css classes assigned to them. The problem
is that when there is wrapped text inside the content area of a table,
an odd, unwarranted 1px space shows up at the far-right of the header
area, in the middle <td>. Here is an image of two table pieces; the
top table (personal tools) is unwrapped text, note, it does not break
the header area... the other (on-line shopping) does break, because
the text is wrapped:

http://homepage.mac.com/jonokane/.Pictures/tableDebacle.gif

Here is the html for the two tables: 
        <table cellpadding="3" cellspacing="0" class="frame" width="300">
            <tr>
                <td class="headerLeft">&nbsp;</td>
                <td class="header">Personal Tools</td>
                <td class="headerRight">&nbsp;</td>
            </tr>
            <tr>
                <td class="frameLeft">&nbsp;</td>
                <td><a href="/tools/classifieds/default.asp"
class="header">Classifieds</a><br>
                Got something to sell or buy? Check the classifieds.</td>
                <td class="frameRight">&nbsp;</td>
            </tr>
        </table>

        <table cellpadding="3" cellspacing="0" class="frame" width="300">
            <tr>
                <td class="headerLeft">&nbsp;</td>
                <td class="header">On-line shopping</td>
                <td class="headerRight">&nbsp;</td>
            </tr>
            <tr>
                <td class="frameLeft">&nbsp;</td>
                <td><a href="/tools/onlineshopping.asp" >Click here</a>
                to purchase a Computer, Personal Digital Assistant,
and other tools for your business at a negotiated discount from Dell,
Palm, and PCMall.</td>
                <td class="frameRight">&nbsp;</td>
            </tr>
        </table>

Here is the header CSS's: 

td.header {
font-weight: bold;
font-size: 10pt;
color: white;
line-height: 12px;
background:  red url(../images/headerTop_bg.gif) repeat-x top right;
}
td.headerLeft {
background-image: url(../images/headerLeft.gif);
background-position-x: left;
background-position-y: top;
background-repeat: no-repeat;
width: 10pt;
}
td.headerRight {
background-image: url(../images/headerRight.gif);
background-position-x: right;
background-position-y: top;
background-repeat: no-repeat;
width: 10pt;
}

So, it's got to be something having to do with the wrapped text. The
only time this weird space shows up is when there is content text that
is wrapped inside the content area cell. What I need is a solution to
this that works in the CSS, so that I can apply it to the td.header
styles and not have to edit every single table in our web-based
application.

Thanks in advance!!