Newsletter problem...

Fanny Cradock · 25-09-2011 2:36pm #1

I'm trying to create a newsletter for Campaign Monitor and I'm having a little difficulty. I never actually learned how to do tables and I'm getting stuck on what I gather is a simple problem. It's probably easier to explain this with a picture

[/URL]

Basically, I want to pad out the newsletter with 30px blank space either side (represented by the black boxs in the picture). I'm using an image for the blank space because I've been told this can help avoid rendering problems with various mail clients.

The problem is that when I put the <img> tags into the <td> for the left and right it shoves the middle <td> (the content td) down. It doesn't do this when I leave the left and right <td>s blank (i.e. don't insert the images). While the obvious answer is not to place images there in the first place, I have to place an image in the footer (a middle separator) which causes the same problem.

In other words, I want this:

<style type="text/css">
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	font-family: georgia, times, serif;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

a{
	text-decoration:none;
}

.outer{
	background:#a6c4d8;
}

.wrapper{
	background:#fff;
}

.mainContent h1{
	color:blue;
	font-family: Georgia, Times, serif;
	font-size:16px;
	font-weight:bold;
}

.mainContent p{
	color:#535353;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:normal;
	line-height:20px;
}

.footer{
	background:#666;
}

.footer h2{
	color:#fff;
	font-family: georgia, times, serif;
	font-size:12px;
	font-weight:bold;
}

.footer p{
	color:#fff;
	font-family: georgia, times, serif;
	font-size:12px;
	font-weight:normal;
}
</style>

	<body>
		<table class="outer" width="100%" border="0" cellpadding="0" cellspacing="0" >
			<tr>
				<td align="center">
					<table class="wrapper" width="625" border="0" cellpadding="0" cellspacing="0" bgcolor="#fff">
						<tr>
							<td class="head" align="center">
								<p>In et iaculis diam. In varius nulla et lacus aliquam dictum. Vestibulum ut mauris imperdiet ante gravida aliquam.</span></webversion></p>
							</td>
						</tr>
						<tr>
							<td valign="top" >
								<table class="mainContent" width="625" border="0" cellpadding="0" cellspacing="0">
									<tr>
										<td width="30" bgcolor="#fff">
                                        	<img src="side_space.gif" width="30"  height="330"/>
                                        </td>
										<td width="565" valign="top">
											<repeater>
                                                <h1><singleline>In et iaculis diam. In varius nulla et lacus aliquam dictum. Vestibulum ut mauris imperdiet ante gravida aliquam.</singleline></h1>
                                                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et mauris   a magna interdum volutpat vitae at augue. Cras elementum faucibus   porta. Mauris dapibus ipsum in velit sollicitudin ut egestas urna   volutpat. Cras ipsum sapien, consequat sit amet tincidunt sit amet,   mollis ut risus. Vivamus turpis enim, viverra at placerat quis, mollis   adipiscing ante. Aliquam elit eros, ornare ac dignissim a, tempor vitae   leo. Mauris sodales dapibus commodo. Mauris eget mattis nisl. Aenean in   magna in augue venenatis tristique. Vivamus tristique sapien dui, id   egestas mauris. Donec id lacus eu velit fringilla sodales. Aliquam   ultrices justo eu nisi consectetur imperdiet. Aliquam ultrices ornare   lacus, sed imperdiet nunc pellentesque laoreet. </p>
                                                <p> Quisque interdum pulvinar tortor, eu molestie dui dapibus non.   Pellentesque habitant morbi tristique senectus et netus et malesuada   fames ac turpis egestas. Suspendisse potenti. Maecenas tincidunt laoreet   bibendum. Cras feugiat ipsum quis turpis volutpat consequat. Curabitur   libero elit, lacinia sed egestas sed, elementum sed orci. Cras mauris   turpis, condimentum sed varius ac, molestie ac nunc. Curabitur fringilla   purus arcu. Nunc sit amet dolor quam, sit amet aliquet lacus. Aliquam   aliquam volutpat nisi, vitae ultricies nibh mollis sagittis. Vivamus sed   diam dui, condimentum convallis massa. </p>
                                                <br />
											</repeater>
							   	 	  </td>
										<td width="30" bgcolor="#fff">
										</td>
									</tr>
								</table>
							</td>
						</tr>
						<tr>
							<td valign="top">
								<table class="footer" width="625" height="150" border="0" cellpadding="0" cellspacing="0">
									<tr>
										<td>
										</td>
										<td align="left" valign="top">
											<h2>In et iaculis diam.</h2>
											<p>Vestibulum ut mauris imperdiet ante gravida aliquam.</p>
											<p align="left">follow us:</p>
										</td>
										<td align="center" valign="top">
											<img src="spacer_footer_middle.gif" width="50" height="150" alt="space" />
										</td>
										<td align="left" valign="top">
											<h2>In et iaculis diam.</h2>
											<p>In et iaculis diam. In varius nulla et lacus aliquam dictum.</p>
										</td>
										<td>
										</td>
									</tr>
								</table>
							</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
	</body>

S.M.B. · 25-09-2011 8:33pm

Where is the first screen shot taken from?

And what are you using for the spacer images? A 1px x 1px transparent gif?

I had a look at your code using a generic spacer gif and it seemed fine.

Fanny Cradock · 25-09-2011 8:58pm

The screen shot is taken from FF 6. I added the black box on the right in photoshop just to give people an idea of what is happening. The spacer images that appear on the left and right are cut to size at a width of 30px (30 + 30 + 560 = 625) and 320px high. Lowering the height and width has no effect.

25-09-2011 10:04pm

FYI - you can't use CSS like that for newsletters, unless you want it to be ignored by many email clients. Check Campaign Monitor's own CSS guides for what you should do. Using tables, or inline CSS is what's needed if you want the email to look the same across email clients.

Fanny Cradock · 25-09-2011 10:15pm

Happily you can use CSS in CM. You just have to be careful. I've sent out a number of different newsletters styled with embedded CSS and they work fine in the major mail clients.

Newsletter problem...

Comments