文字间距表格储存格

Question

I have created a table in html for an email (FYI this is not for spam, it's to be used internally at the organization I work for). CSS is pretty much out of the question since we use Outlook and Office 2007 (which will not render the CSS properly - nothing worked on that front). I have 2 cells side by side - one has a background image with text over top, the other has a ttile using an h1 tag I created.

The issue: when I input a 2-lined title in the cell adjacent to the one with the background pic, the spacing at the botttom is so large the background picture duplicates part of it vertically (even though the text in the adjacent cell is not larger than the pic). I have tried to specify the padding, but it doesn't change anything.

My rule for the h1 tag looks like this:

td.leftCol h1 {
color: #003152;
font-size: 0.9em;
}

The code for the cells in question is this:

<tr bgcolor="#FFFFFF">
<td width="150px" height="42px" class="leftCol" background="/news/newsletters/images/leftcol_box.gif" align="right"><font color="#FFFFFF"><strong>Text&nbsp;&nbsp;</strong></font></td>
<td width="298px" class="leftCol" style="padding: 5px 0px 0px 0px;"><h1>New Medical School in New Brunswick</h1></td>
</tr>

Any suggestions?

Answer 1

Unfortunatly, at least Outlook 2007 ignores all background related CSS-Tags and from my experience, renders margins/paddings totally different or not.

Try to create the HTML in Word if it is possible, at least Outlook07-10 and Word share the same render-engine :)

Answer 2

In case you have same image for all rows, put it in css class like below

background-image: url("http://yoursite/news/newsletters/images/leftcol_box.gif");

background-repeat: no-repeat;