Using Campaign Monitor to send emails, is there any way to get rid of the 5px white space above text in a vertical-align table?

Question

Sending out mass emails, pretty much the whole thing is inside tables.

CSS affecting the table:

.title  {
vertical-align: top;
}

HTML:

<table width="580" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="title" align="left" width="440" valign="top">
<h2><singleline label="Title">Enter your title</singleline></h2>
<p><multiline label="Description">Description</multiline></p>


</td>

<td align="left" valign="top" width="20"><img src="/images/00.gif" height="1" width="20" border="0"></td>

<td align="left" valign="top" width="120"><img src="/images/001.jpg" editable="true" label="Image" width="120" border="0"></td>
</tr>
<tr>
<td colspan="3" align="left" valign="top" width="580"><img src="/images/00.gif" height="20" width="1" border="0"></td>
</tr>
</table>

I need the text inside the tag to be flush with the top of the table. Currently the /images/001/jpg is flush, but the text is 5 pixels below the edge of the table.

I'm using vertical-align: top in the CSS, have tried border-spacing: none, border-collapse: collapse, and border: none. None of them solved the problem.

Using margin-top: -5px; on the tag solved the problem in standard browser testing, but wasn't supported by some email clients.

Answer 1

this is Ros from Campaign Monitor. What isn't entirely obvious is that the <singleline> and <multiline> tags convert into <p>your content</p>

...when imported into the Campaign Monitor editor. It's these <p> tags that are creating this extra padding - here's an example.

The easiest way to avoid this is to add p { margin: 0; padding: 0; } to your CSS styles.

Hopefully this fixes this issue for you. Note that we have a forum for answering questions like this, so feel free to post your template code there in the future.

Many thanks to everyone who contributed here!

Answer 2

Put

valign="top"

on your TD for the text. If the email client doesn't recognize CSS it should recognize the standard HTML attribute.

Also, if that doesn't fix it, can you edit your Q and add the definition for "title" CSS definition that you are using on that .

Answer 3

I'm assuming your referring to the text inside the H2 tag.

Create a class for the <h2>

.noPad  {
padding-top: 0px;
}

Or don't use the H2 and just use a span or div element.

Answer 4

Ros' suggestion suffices most of the time, but Gmail removes your header styles which leaves the inserted p tags with gmail's default margin top and bottom.

An alternative to get around this is by adding a div tag within your multiline tag. This will successfully prevent Campaign Monitor from wrapping your content with a p tag.

Here is a structure example:

<multiline>
    <div>
        Your Content Goes Here.
    </div>
</multiline>

Answer 5

It could just be the line-height of the text as opposed to margin/padding - check that as well