Simple html newsletter - right align picture?

valve90210 · 20 Apr 2012 at 15:00

Hi All

Where I work we use some online database software and want to send out a bulk email. In the past the only option we have had to make anything look nice is to produce a pdf and attach it to the bulk email.

Recently the people that provide the software have added the option of pasting html into the bulk email (wow....the future is finally here...)

As such I'm in the process of putting together a very simple html newsletter which I am doing in frontpage as it is either that or trying to use a really simplistic and awful browser based editor...

I'm keeping it nice and simple in the hope that it'll display ok in most email programmes.

To keep things lined up ok I'm using tables which are set to 640 pixels wide as that is the maximum width of images that can be uploaded to the database software. This way I can use a 640 width image as a banner header...

Anyway, the newsletter is basically a series of short articles with a single image for each.

The images alternate son for one story it'll be aligned on the left and on the next it'll be on the right.

To do this I've put each story into a table with 2 columns and put picture in one column and text in the other.

However when I'm previewing it, the images which I have put in the right hand column and set to align right are displaying too far to the left not all the way to the right of the table as I want them to be as you can see below.

The image I've marked as 1 should be aligned over to the right, ie level with the green line I've helpfully added...

The image and the text are placed into a 2 column table set to 640 pixels wide. The text on the left is in a cell which is set at 384 pixels and aligned left and the image is placed in the right hand column set at 256 pixels wide and set to align right...

Can anyone explain why this is happening or how I can sort it out?

Valve

radderfire · 20 Apr 2012 at 15:10

Try adding right alignment on the right cell of the table, i.e. <td align="right"> </td>:

<table width="640" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td align="right"> </td>
</tr>
</table>

Rgds

GravyMonster · 20 Apr 2012 at 15:11

On the table cell with the right hand image in put: 'align="right"'

valve90210 · 20 Apr 2012 at 15:15

Hmmm, just gave that a try but it didn't make any difference sadly.

edit...actually that works fine on chrome but in IE9 it places the image as per my example pic...

GravyMonster · 20 Apr 2012 at 15:20

Can you post your HTML. It's hard to say what you need to do without seeing what's already going on.

valve90210 · 20 Apr 2012 at 15:33

Here is my html...

Code:

<html>

<head>
<meta http-equiv="Content-Language" content="en-gb">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>xxxxx Seniors Newsletter</title>
<style>
<!--
story body   {  }
-->
</style>
</head>

<body>

<div align="center">
	<table border="0" width="640" cellspacing="0" cellpadding="0">
		<tr>
			<td>
			<p align="center">
			<img border="0" src="Header_Test_01.png" width="640" height="234"></td>
		</tr>
		<tr>
			<td>
			<p align="center">&nbsp;</p>
			</td>
		</tr>
	</table>
	<div align="center">
		<table border="1" width="640" cellpadding="3" bordercolor="#FF00FF" cellspacing="5" bordercolorlight="#FF00FF" bordercolordark="#FF00FF" style="border-collapse: collapse">
			<tr>
				<td>
				<p align="center"><b><font size="5">How to access Seniors Reconnected</font></b><br>
				To log onto the School website please click on 
				<a href="http://www.xxxxx.kent.sch.uk/Pages/Index.aspx">this link
				</a>then 
				select the Seniors tab<br>
				<br>
				<b><font size="5">Click on the picture to go to Seniors Reconnected<br>
				Log in using your own username and password</font></b><br>
&nbsp;</td>
			</tr>
		</table>
		<div align="center">
			<table border="0" width="640">
				<tr>
					<td>&nbsp;</td>
				</tr>
			</table>
		</div>
	</div>
</div>
<div align="center">
	<table border="0" width="640" cellspacing="1" cellpadding="2" bgcolor="#FFFFFF">
		<tr>
			<td width="160">
			<img border="0" src="Image_003.png" width="144" height="195" alt="The Senior 2012 - Did you receive your copy?"></td>
			<td>
			<p class="MsoNormal" style="text-autospace: none">
			<span style="font-size: 14.0pt; font-family: 'Bookman Old Style',serif; color: red">
			Did you receive your copy of <br>
			The Senior 2012 magazine?</span></p>
			<p class="MsoNormal" style="text-autospace: none">
			<span style="font-size: 10.0pt; font-family: Arial,sans-serif">We 
			hope you have received your copy of The Senior 2012 in the post by 
			now. If you haven’t, please do get in touch and we will ensure we 
			have your correct address details. </span></p>
			<p class="MsoNormal" style="text-autospace: none">
			<span style="font-size: 10.0pt; font-family: Arial,sans-serif">
			&nbsp;Please do also keep us up to date with your latest news. We, and 
			your fellow Seniors, love to hear what you have been doing recently.</span></p>
			<p class="MsoNormal" style="text-autospace: none">
			<span style="font-size: 10.0pt; font-family: Arial,sans-serif">
			&nbsp;Please contact: </span>
			<a style="color: blue; text-decoration: underline; text-underline: single" href="mailto:[email protected]">
			<span style="font-size: 10.0pt; font-family: Arial,sans-serif">
			[email protected]</span></a><span style="font-size: 10.0pt; font-family: Arial,sans-serif">
			</span></td>
		</tr>
		<tr>
			<td width="160">&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
	</table>
</div>
<div align="center">
	<table border="0" width="640" bgcolor="#FFFFFF">
		<tr>
			<td width="364">
			<p class="MsoNormal" align="left">
			<span style="font-size: 14.0pt; font-family: 'Bookman Old Style',serif; color: red">
			Seniors’ Day 2012</span><b><span style="font-size: 10.0pt; font-family: Arial,sans-serif"><br>
			FINAL CHANCE</span></b><span style="font-size: 10.0pt; font-family: Arial,sans-serif"> 
			to book your place at Seniors’ Day on Saturday 12 May 2012. Our 
			Speaker of the Year is Baroness Shackleton of Belgravia LVO. <br>
			We will be saying goodbye to five long serving members of staff: 
			Jane Ashton, Stuart Beer, Lucy Boyce, Gill Swaine and Jonathan 
			Watts; and Sue Perry is stepping down as Limes Hm.</span></p>
			<p>&nbsp;</td>
			<td width="266" align="right" valign="top">
			<img border="0" src="Image_004.png" width="256" height="185" align="right" hspace="0"></td>
		</tr>
		<tr>
			<td colspan="2"><b><i>
			<span style="font-size: 10.0pt; font-family: Arial,sans-serif">
			Jonathan will be performing a comical song during the Music Recital, 
			for those of you who know him well it will be a performance not to 
			be missed!<br>
			Sue Perry would like to extend a personal invitation to all Limes 
			Seniors to join her for lunch.</span></i></b></td>
		</tr>
	</table>
</div>
<div align="center">
	<table border="0" width="640" cellspacing="0" cellpadding="0">
		<tr>
			<td width="135">&nbsp;</td>
			<td width="495">&nbsp;</td>
		</tr>
		<tr>
			<td width="135" height="147">
			<img border="0" src="Image_005.png" width="126" height="136"></td>
			<td width="495" height="147">
			<p class="MsoNormal" style="text-autospace: none">
			<span style="font-size: 14.0pt; font-family: 'Bookman Old Style',serif; color: red">
			50th Anniversary Reunion Lunch for 1962 Seniors</span></p>
			<p class="MsoNormal" style="text-autospace: none">
			<span style="font-size: 10.0pt; font-family: Arial,sans-serif">The 
			50th Reunion lunch will take place at the Cavalry &amp; Guards Club on 
			Wednesday 20 June 2012.&nbsp; All Seniors who left in 1962 or before are 
			welcome to attend. Our Speaker this year is Rosie Garthwaite 
			G/Elms99. </span></td>
		</tr>
		<tr>
			<td colspan="2" height="66">
			<b><i>
			<span style="font-size: 10.0pt; font-family: Arial,sans-serif">
			Please would all 1962 Seniors send in a short biography and 
			photograph for the yearbook we will be producing for the day - 
			whether you are able to attend or not. We will send copies to those 
			who are unable to attend.</span></i></b></td>
		</tr>
	</table>
</div>

</body>

</html>

radderfire · 20 Apr 2012 at 16:44

It could be an effect from all the <div align="center"></div>. I can't see why you need all of them, you only need:

<body>
<div align="center">

blah blah blah

</div>
</body>

So try taking all the other <div align="center"></div> out.

Then remove the individual column widths you have set on the column table, and if necessary use table padding to space away from the table border.

Rgds

valve90210 · 20 Apr 2012 at 17:01

Would the additional <div> bits be due to me using several different tables? WHich I have done so I can have different width columns through out the newsletter on the different stories...

radderfire · 20 Apr 2012 at 20:26

Maybe. You don't need a div round each individual table, one for the whole page will suffice.

Are you able to edit the html manually? If so, just take the superfluous divs out.

Rgds

valve90210 · 21 Apr 2012 at 09:44

I see, I can indeed edit the html as I'm using frontpage, I shall have a go at that next week when I'm back at work.

valve90210 · 25 Apr 2012 at 09:37

Been off work a few days due to illness, I'm now back and have removed the additional divs but I am still having a problem with IE not displaying the right aligned images correctly, where as Chrome displays them perfectly, is it just because IE is a bit rubbish?

They still display as per my original example image, ie to the left of the cell.

I have set align right for both the image and the cell properties but it doesn't make any difference...

Any further ideas?

rhodeski · 25 Apr 2012 at 11:00

As above, you don't need all of those divs (front page probably just adds them around any tables you insert).

Seems like you've got access to the <head> seciton of the HTML and there's already a Style section in there.

Ideally, you should get rid of the table and create a layout using divs / css (I know it's easy to align stuff in tables to begin with but using div's will ultimately give you muh more control over layout / placement in the long run).

In the meantime, you could try adding a css class to the image tag, then styling that - might be as simple as just floating it right:

<img border="0" src="Image_005.png" width="126" height="136" class="imageRight">

Then in the Style tag in the header:

<style>



</style>

If all of the images are the same size, you can also specify the width / height in the class rather than in the image tag but can worry about that another day

Failing that, you could add specific rules to target the version of IE your users will be viewing the newsletter in - this is a good site for working with / around IE's 'features'. Something along the lines of if IE9, set right margin to -50px (avoid this if at all possible as it's horrid markup really, but deadlines are a b*tch) ^^

If you're sending this out as an email, note that Outlook 2007 and 2010 interpret HTML / CSS differently so what looks right in one version might not look right in another (same as going between IE9 and chrome, which again, will be different in IE8 & IE7!)

valve90210 · 25 Apr 2012 at 11:13

The trouble is the html support in the software that will be used for the bulk email is really limited...it doesn't even have an html editor... It has only been int he last few weeks that they have added the ability to paste html into the email, and even then only very basic stuff.

Hence I am using simple tables.

Some how, and I'm not entirely sure how (I have a terrible headache and can't concentrate...and can't remember what exactly I did) but I have managed to get it working this morning.

simisker · 25 Apr 2012 at 11:23

I ran your newsletter through our Litmus app; here are the results:

https://plasticle.litmus.com/pub/0892b2b

[note that images aren't showing because the URLs are relative, rather than the absolute URLs that Litmus needs. This isn't a problem with the email, though obviously you'll need to ensure that your sending software converts them to absolute URLs when broadcasting.]

That bit of the layout seems to be okay in all but some Outlook clients.

To be honest, I wouldn't bother spending much time trying to fix that problem. The message is still conveyed, the text is still readable [though it's way too small for some mobile devices, as you can see - now that *is* something you may want to fix], and the picture will show. I doubt whether a single recipient will get into a rage over it.

Incidentally, rhodeski's suggestion to use divs and floats is probably best avoided; these web standards are notoriously unreliable in emails. Tables all the way

valve90210 · 25 Apr 2012 at 12:30

Cheers for that, that's really handy and very useful to be able to see how it looks on various devices.

The pictures are only really for testing purposes at the moment, I will be uploading to the database/cms we use first and then insert from there so they will be absolute locations which should be fine.

valve90210 · 26 Apr 2012 at 15:12

Still working on this blooming newsletter...

Pretty much everything seems to be working, images are being picked up etc, but for some reason when the html is being sent out via the database software it's all coming across too narrow, which can mess up the layout. I'm guessing this is caused by the html interpreter within the bulk email system which I have to say is really rubbish and basic?!?! Does that seem the most likely case?

Limenote · 26 Apr 2012 at 23:06

screen shot would be handy, your code looks fine so no idea where it would misinterpret the width..

edit: you have the msonormal class applied to several elements and you haven't completely closed many of your inline style properties using ;

While this probably isn't the cause html emails are nightmarish and using a best practice will solve other problems you might have later.