• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 398
  • Last Modified:

HTML Coding for Newsletter

I have a problem (please note that my HTML is very basic) in that the newsletter that I have designed (see file entitled "Original Layout in CMS Newsletter Editor) in Word Press (from a plug-in) leaves a fairly large gap between the logo (crown) at the top of the page and the menu below.

The real resulting output can be seen in the test email sent and received by an Outlook 2003 email client.

The gap is really ugly.

Requirements
I would like to:
(a) close the gap between the 'logo' (crown) and the 'menu' AND
(b) close the gap between the 'menu' and the header 'image'
(c) create equal borders on either side of the principal banner image. (in the CMS the gap appears equal but when rendered in Outlook 2003 it appears off-centre)

The resulting gap should mirror the gap between the top of the page and the top of the 'logo'.

To faciliate the response I have copied the current HTML code into the link below.

<div style="background-color: #000000;">
<table style="margin-top: 20px; background-color: #ffffff; border: 5px solid #3B3B3B;" cellpadding="14" width="660" align="center">
<tbody>
<tr>
<td align="center"><img style="padding-top: 12px;" src="http://www.elizabethrollinsscott.com/wp-content/uploads/2011/04/ers-log-nl.jpg" border="0" alt="" /></td>
</tr>
<tr>
<td style="color: #000000;" align="center"><strong> <span style="color: #000000;"><span style="font-family: arial,helvetica,sans-serif;"> <img src="http://www.elizabethrollinsscott.com/wp-content/uploads/2011/04/nl-bar.jpg" alt="" /><br /> <a style="color: #000000;" href="http://www.elizabethrollinsscott.com/">Home</a> &nbsp; &nbsp; &nbsp; 	<a style="color: #000000;" href="http://www.elizabethrollinsscott.com/artworks">Artworks</a> &nbsp;  &nbsp;  &nbsp; 	<a style="color: #000000;" href="http://www.elizabethrollinsscott.com/news/">News</a> &nbsp;  &nbsp; &nbsp; 	<a style="color: #000000;" href="http://www.elizabethrollinsscott.com/about">About</a> &nbsp;  &nbsp; &nbsp; 	<a style="color: #000000;" href="http://www.elizabethrollinsscott.com/shopping">Shopping</a> &nbsp;  &nbsp; &nbsp;  	<a style="color: #000000;" href="http://www.elizabethrollinsscott.com/partners">Partners</a> &nbsp;  &nbsp; &nbsp; 	<a style="color: #000000;" href="http://www.elizabethrollinsscott.com/contact">Contact</a> </span></span> </strong> <img src="http://www.elizabethrollinsscott.com/wp-content/uploads/2011/04/nl-bar.jpg" alt="" /></td>
</tr>
<tr>
<td><img style="padding-left: 8px;" src="http://www.elizabethrollinsscott.com/wp-content/uploads/2011/04/ers-nl-header-1.jpg" alt="" width="600" height="165" /></td>
</tr>
<tr>
<!-- header end -->
<td>
<table cellspacing="0" cellpadding="12">
<tbody>
<tr>
</tr>
<tr>
<td style="background-color: #eeeeee;"><span style="font-family: arial,helvetica,sans-serif;"> <strong><span style="color: #000000;">Newsletter Spring 2011</span></strong> </span></td>
</tr>
<tr>
<td><span style="font-family: arial,helvetica,sans-serif;">Welcome to my first newsletter that will be published on a regular basis, covering news of what I&rsquo;ve been up to, reviews of exhibitions I&rsquo;ve attended, places of interest and inspiring places I&rsquo;ve visited, events that I&rsquo;m participating in and exhibitions and galleries where I&rsquo;m showing my work. In between, I&rsquo;ll be making regular posts to YouTube, Facebook and Twitter to keep you up to date with new artworks and the lastest progress on new projects. For all those of you who have either bought my work, visited Diesel House Studios or supported me over years &ndash; thank you. Hope you have a lovely Easter.
<p><img src="http://www.elizabethrollinsscott.com/wp-content/uploads/2011/04/ers-sig-nl.jpg" alt="" /></p>
</span></td>
</tr>
<tr>
<td style="background-color: #eeeeee;"><span style="font-family: arial,helvetica,sans-serif;"> <strong><span style="color: #000000;">My New Website Launch</span></strong> </span></td>
</tr>
<tr>
<td><span style="font-family: arial,helvetica,sans-serif;">After much blood, sweat, tears and many sleepless nights, not to mention far too much chocolate and cake and some (more) added pounds, my new website has finally been launched. There are still tons more images to load on to the site as I attempt to catalogue over a decade of work. The links above take you straight through to my site, which now includes a shop, so you can also buy work online or buy gifts for loved ones. My website address is <a href="http://www.elizabethrollinsscott.com/">www.elizabethrollinsscott.com</a> </span></td>
</tr>
<tr>
<td style="background-color: #eeeeee;"><span style="font-family: arial,helvetica,sans-serif;"> <strong><span style="color: #000000;">New Bronze Sculpture</span></strong> </span></td>
</tr>
<tr>
<td><span style="font-family: arial,helvetica,sans-serif;">
<p><img style="float: left; margin-top: 0px; margin-bottom: 0px; margin-left: 6px; margin-right: 6px;" src="http://www.elizabethrollinsscott.com/wp-content/uploads/2010/12/Sculpture-Bronze-Sculpture.jpg" alt="Bronze Sculpture" width="224" height="150" />My latest bronze that was cast in deepest, darkest Somerset last last year was The Lovers (detail left) which I based on a previous paper sculpture. I am now working on a new bronze that I&rsquo;ll reveal to you in my next newsletter. See the exciting bronze process at my foundry by clicking on <a href="http://youtu.be/JBCJL3yx5OA?hd=1">this link</a>. Further details can be found on my site under '<a href="http://www.elizabethrollinsscott.com/artworks-sculpture-bronzesculpture">bronze sculpture</a>'.</p>
</span></td>
</tr>
<tr>
<td style="background-color: #eeeeee;"><span style="font-family: arial,helvetica,sans-serif;"> <strong><span style="color: #000000;">Latest Exhibition</span></strong> </span></td>
</tr>
<tr>
<td><span style="font-family: arial,helvetica,sans-serif;">
<p><img style="float: left; margin-left: 6px; margin-right: 6px;" src="http://www.elizabethrollinsscott.com/wp-content/uploads/2010/11/NSAW.jpg" alt="NSAW" width="99" height="101" />North Somerset Arts Week (NSAW) will be taking place from April 29th to 8th May. As part of the 10 day arts festival, I will be opening my doors to friends, collectors and the public alike (see venue 100). It would be great to see you over the arts week to show you my new work. Further details can be found on the NSAW website by clicking the following link &ndash; <a href="http://www.northsomersetarts.co.uk/index.php?option=com_sobi2&amp;sobi2Task=s obi2Details&amp;catid=6&amp;sobi2Id=111&amp;Itemid=81">NSAW</a>.</p>
</span></td>
</tr>
<tr>
<td style="background-color: #eeeeee;"><span style="font-family: arial,helvetica,sans-serif;"> <strong><span style="color: #000000;">New Ceramic Collection</span></strong> </span></td>
</tr>
<tr>
<td><span style="font-family: arial,helvetica,sans-serif;">
<p><img style="float: left; margin-left: 6px; margin-right: 6px;" src="http://www.elizabethrollinsscott.com/wp-content/uploads/2011/04/n1-2.jpg" alt="" width="223" height="125" />I&rsquo;m now working on a new collection of handbuilt ceramics that will be mainly fired using my new raku kiln that my husband, David has built for me. I&rsquo;m also using new glaze recipes that I&rsquo;ve developed so it will be an exciting time. The new angel bowls have been inspired by the fabric of the Somerset countryside.</p>
</span></td>
</tr>
<tr>
<td style="background-color: #eeeeee;"><span style="font-family: arial,helvetica,sans-serif;"> <strong><span style="color: #000000;">New Commissions</span></strong> </span></td>
</tr>
<tr>
<td><span style="font-family: arial,helvetica,sans-serif;">
<p><img style="float: left; margin-left: 6px; margin-right: 6px;" src="http://www.elizabethrollinsscott.com/wp-content/uploads/2011/04/n1-3.jpg" alt="" width="217" height="145" />I was recently commissioned to produce the angel to the left, called &lsquo;Windsister&rsquo; for a health practitioner to sit in her practice room. The shot was taken in the church yard of of Montacute Church in Somerset. If you would like to commission a work, please contact me by clicking on the link at the top of the page.</p>
</span></td>
</tr>
<tr>
<td style="background-color: #eeeeee;"><span style="font-family: arial,helvetica,sans-serif;"> <strong><span style="color: #000000;">Sign Up to My Sites</span></strong> </span></td>
</tr>
<tr>
<td><span style="font-family: arial,helvetica,sans-serif;">
<p>You can keep in touch with my lastest works and activity by signing up here:</p>
<p><a href="http://www.youtube.com/user/erollinsscott"><img style="padding-right: 5px;" src="http://www.elizabethrollinsscott.com/wp-content/uploads/2011/04/youtube.jpg" border="0" alt="" align="left" /></a> Follow me on YouTube</p>
<p><a href="http://www.twitter.com/erollinsscott"><img style="padding-right: 5px;" src="http://www.elizabethrollinsscott.com/wp-content/uploads/2011/04/facebook.jpg" border="0" alt="" align="left" /></a> Follow me on Facebook - My Online Diary</p>
<p><a href="http://www.twitter.com/erollinsscott"><img style="padding-right: 5px;" src="http://www.elizabethrollinsscott.com/wp-content/uploads/2011/04/twitter.jpg" border="0" alt="" align="left" /></a> Follow me on Twitter For My Inspiration &amp; Thoughts</p>
</span></td>
</tr>
</tbody>
</table>
<span style="font-family: arial,helvetica,sans-serif;"><span> To unsubscribe <a href="http://www.elizabethrollinsscott.com/{unsubscription_url}">click here</a>. </span> </span></td>
</tr>
</tbody>
</table>
</div>

Open in new window

Logo-Alignment-in-CMS-Newsletter.jpg
Logo-Alignment-in-Outlook-2003-C.jpg
0
davidascott
Asked:
davidascott
  • 12
  • 7
1 Solution
 
Dave BaldwinFixer of ProblemsCommented:
You can reduce the cell padding (14), the 'margin-top:' on the table, and the 'padding-top:' on the image.  It looks to me like you have centered the image as far HTML commands goes.  See if any of this works for you.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Untitled</title>
</head>
<body>
<div style="background-color: #000000;">
<table style="margin-top: 2px; background-color: #ffffff; border: 5px solid #3B3B3B;" cellpadding="4" width="660" align="center">
<tbody>
<tr>
<td align="center"><img style="padding-top: 2px;" src="http://www.elizabethrollinsscott.com/wp-content/uploads/2011/04/ers-log-nl.jpg" border="0" alt="" /></td>
</tr>
<tr>
<td style="color: #000000;" align="center"><strong> <span style="color: #000000;"><span style="font-family: arial,helvetica,sans-serif;"> <img src="http://www.elizabethrollinsscott.com/wp-content/uploads/2011/04/nl-bar.jpg" alt="" /><br /> <a style="color: #000000;" href="http://www.elizabethrollinsscott.com/">Home</a> &nbsp; &nbsp; &nbsp;   <a style="color: #000000;" href="http://www.elizabethrollinsscott.com/artworks">Artworks</a> &nbsp;  &nbsp;  &nbsp;     <a style="color: #000000;" href="http://www.elizabethrollinsscott.com/news/">News</a> &nbsp;  &nbsp; &nbsp;     <a style="color: #000000;" href="http://www.elizabethrollinsscott.com/about">About</a> &nbsp;  &nbsp; &nbsp;    <a style="color: #000000;" href="http://www.elizabethrollinsscott.com/shopping">Shopping</a> &nbsp;  &nbsp; &nbsp;      <a style="color: #000000;" href="http://www.elizabethrollinsscott.com/partners">Partners</a> &nbsp;  &nbsp; &nbsp;      <a style="color: #000000;" href="http://www.elizabethrollinsscott.com/contact">Contact</a> </span></span> </strong> <img src="http://www.elizabethrollinsscott.com/wp-content/uploads/2011/04/nl-bar.jpg" alt="" /></td>
</tr>
<tr>
<td align="center"><img  src="http://www.elizabethrollinsscott.com/wp-content/uploads/2011/04/ers-nl-header-1.jpg" alt="" width="600" height="165" /></td>
</tr>
<tr>
<!-- header end -->
<td>
<table cellspacing="0" cellpadding="12">
<tbody>
<tr>
</tr>
<tr>
<td style="background-color: #eeeeee;"><span style="font-family: arial,helvetica,sans-serif;"> <strong><span style="color: #000000;">Newsletter Spring 2011</span></strong> </span></td>
</tr>
<tr>
<td><span style="font-family: arial,helvetica,sans-serif;">Welcome to my first newsletter that will be published on a regular basis, covering news of what I&rsquo;ve been up to, reviews of exhibitions I&rsquo;ve attended, places of interest and inspiring places I&rsquo;ve visited, events that I&rsquo;m participating in and exhibitions and galleries where I&rsquo;m showing my work. In between, I&rsquo;ll be making regular posts to YouTube, Facebook and Twitter to keep you up to date with new artworks and the lastest progress on new projects. For all those of you who have either bought my work, visited Diesel House Studios or supported me over years &ndash; thank you. Hope you have a lovely Easter.
<p><img src="http://www.elizabethrollinsscott.com/wp-content/uploads/2011/04/ers-sig-nl.jpg" alt="" /></p>
</span></td>
</tr>
<tr>
<td style="background-color: #eeeeee;"><span style="font-family: arial,helvetica,sans-serif;"> <strong><span style="color: #000000;">My New Website Launch</span></strong> </span></td>
</tr>
<tr>
<td><span style="font-family: arial,helvetica,sans-serif;">After much blood, sweat, tears and many sleepless nights, not to mention far too much chocolate and cake and some (more) added pounds, my new website has finally been launched. There are still tons more images to load on to the site as I attempt to catalogue over a decade of work. The links above take you straight through to my site, which now includes a shop, so you can also buy work online or buy gifts for loved ones. My website address is <a href="http://www.elizabethrollinsscott.com/">www.elizabethrollinsscott.com</a> </span></td>
</tr>
<tr>
<td style="background-color: #eeeeee;"><span style="font-family: arial,helvetica,sans-serif;"> <strong><span style="color: #000000;">New Bronze Sculpture</span></strong> </span></td>
</tr>
<tr>
<td><span style="font-family: arial,helvetica,sans-serif;">
<p><img style="float: left; margin-top: 0px; margin-bottom: 0px; margin-left: 6px; margin-right: 6px;" src="http://www.elizabethrollinsscott.com/wp-content/uploads/2010/12/Sculpture-Bronze-Sculpture.jpg" alt="Bronze Sculpture" width="224" height="150" />My latest bronze that was cast in deepest, darkest Somerset last last year was The Lovers (detail left) which I based on a previous paper sculpture. I am now working on a new bronze that I&rsquo;ll reveal to you in my next newsletter. See the exciting bronze process at my foundry by clicking on <a href="http://youtu.be/JBCJL3yx5OA?hd=1">this link</a>. Further details can be found on my site under '<a href="http://www.elizabethrollinsscott.com/artworks-sculpture-bronzesculpture">bronze sculpture</a>'.</p>
</span></td>
</tr>
<tr>
<td style="background-color: #eeeeee;"><span style="font-family: arial,helvetica,sans-serif;"> <strong><span style="color: #000000;">Latest Exhibition</span></strong> </span></td>
</tr>
<tr>
<td><span style="font-family: arial,helvetica,sans-serif;">
<p><img style="float: left; margin-left: 6px; margin-right: 6px;" src="http://www.elizabethrollinsscott.com/wp-content/uploads/2010/11/NSAW.jpg" alt="NSAW" width="99" height="101" />North Somerset Arts Week (NSAW) will be taking place from April 29th to 8th May. As part of the 10 day arts festival, I will be opening my doors to friends, collectors and the public alike (see venue 100). It would be great to see you over the arts week to show you my new work. Further details can be found on the NSAW website by clicking the following link &ndash; <a href="http://www.northsomersetarts.co.uk/index.php?option=com_sobi2&amp;sobi2Task=s obi2Details&amp;catid=6&amp;sobi2Id=111&amp;Itemid=81">NSAW</a>.</p>
</span></td>
</tr>
<tr>
<td style="background-color: #eeeeee;"><span style="font-family: arial,helvetica,sans-serif;"> <strong><span style="color: #000000;">New Ceramic Collection</span></strong> </span></td>
</tr>
<tr>
<td><span style="font-family: arial,helvetica,sans-serif;">
<p><img style="float: left; margin-left: 6px; margin-right: 6px;" src="http://www.elizabethrollinsscott.com/wp-content/uploads/2011/04/n1-2.jpg" alt="" width="223" height="125" />I&rsquo;m now working on a new collection of handbuilt ceramics that will be mainly fired using my new raku kiln that my husband, David has built for me. I&rsquo;m also using new glaze recipes that I&rsquo;ve developed so it will be an exciting time. The new angel bowls have been inspired by the fabric of the Somerset countryside.</p>
</span></td>
</tr>
<tr>
<td style="background-color: #eeeeee;"><span style="font-family: arial,helvetica,sans-serif;"> <strong><span style="color: #000000;">New Commissions</span></strong> </span></td>
</tr>
<tr>
<td><span style="font-family: arial,helvetica,sans-serif;">
<p><img style="float: left; margin-left: 6px; margin-right: 6px;" src="http://www.elizabethrollinsscott.com/wp-content/uploads/2011/04/n1-3.jpg" alt="" width="217" height="145" />I was recently commissioned to produce the angel to the left, called &lsquo;Windsister&rsquo; for a health practitioner to sit in her practice room. The shot was taken in the church yard of of Montacute Church in Somerset. If you would like to commission a work, please contact me by clicking on the link at the top of the page.</p>
</span></td>
</tr>
<tr>
<td style="background-color: #eeeeee;"><span style="font-family: arial,helvetica,sans-serif;"> <strong><span style="color: #000000;">Sign Up to My Sites</span></strong> </span></td>
</tr>
<tr>
<td><span style="font-family: arial,helvetica,sans-serif;">
<p>You can keep in touch with my lastest works and activity by signing up here:</p>
<p><a href="http://www.youtube.com/user/erollinsscott"><img style="padding-right: 5px;" src="http://www.elizabethrollinsscott.com/wp-content/uploads/2011/04/youtube.jpg" border="0" alt="" align="left" /></a> Follow me on YouTube</p>
<p><a href="http://www.twitter.com/erollinsscott"><img style="padding-right: 5px;" src="http://www.elizabethrollinsscott.com/wp-content/uploads/2011/04/facebook.jpg" border="0" alt="" align="left" /></a> Follow me on Facebook - My Online Diary</p>
<p><a href="http://www.twitter.com/erollinsscott"><img style="padding-right: 5px;" src="http://www.elizabethrollinsscott.com/wp-content/uploads/2011/04/twitter.jpg" border="0" alt="" align="left" /></a> Follow me on Twitter For My Inspiration &amp; Thoughts</p>
</span></td>
</tr>
</tbody>
</table>
<span style="font-family: arial,helvetica,sans-serif;"><span> To unsubscribe <a href="http://www.elizabethrollinsscott.com/{unsubscription_url}">click here</a>. </span> </span></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

Open in new window

0
 
Ingeborg Hawighorst (Microsoft MVP / EE MVE)Microsoft MVP ExcelCommented:
Hello,

You can reduce the cell padding for the table and/or reduce the padding for the individual cells. Look for padding in the <table> tag, for example

<table cellspacing="0" cellpadding="12">

and reduce, and look for padding for the image

<td align="center"><img style="padding-top: 12px;" src="http://www.elizabethrollinsscott.com/wp-content/uploads/2011/04/ers-log-nl.jpg" border="0" alt="" /></td>

cheers, teylyn
0
 
davidascottAuthor Commented:
DaveBaldwin,

I copied the code that you produced above and inserted it into the Newsletter.  Whilst the the HTML file read directly from a Mozilla browser appears to give a better result, the result from the test email sent to an Outlook email client does not really reflect the changes.(see attached file).

You can see I still have the following issues:

1. Gap - above/below the banner image not closed
2. Gap above navigation bar not closed.
3. Gap to sides of banner image not equal

Any other ideas?

Best,
David
Updated-Newsletter---From-Dave-B.jpg
0
Cloud Class® Course: Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

 
davidascottAuthor Commented:
DaveBaldwin,

Just so that you can see the result in Mozilla, I have attached the screen grab for reference to that you can see the differences.

Best,
David
Updated-Newsletter---From-Dave-B.jpg
0
 
davidascottAuthor Commented:
Dave Baldwin,

You can see in the Mozilla version the space above the banner is spot on but the space below the banner is not equal.  Also, the space on either side of the banner is equal as well.

The space above the navigation bar could be closed slightly.

The problem, that I could not resolve myself was that the output in the newsletter editor and browser appeared a lot better than in Outlook, Google. Hotmail and Yahoo (the test email accounts).  This looks like this is still the challenge.

Best,
David
0
 
davidascottAuthor Commented:
Teylyn,

You suggested the following:

You can reduce the cell padding for the table and/or reduce the padding for the individual cells. Look for padding in the <table> tag, for example

<table cellspacing="0" cellpadding="12">

and reduce, and look for padding for the image

<td align="center"><img style="padding-top: 12px;" src="http://www.elizabethrollinsscott.com/wp-content/uploads/2011/04/ers-log-nl.jpg" border="0" alt="" /></td>


I adjusted the padding as suggested at the 2 points you referred to but the result was not noticeably better at all.

Is there anything else you would suggest?
Best,
David
0
 
davidascottAuthor Commented:
DaveBaldwin,

Many apologies and thank you again for the code. I must have incorrectly copied your code to the newsletter.  I have produced below the output for:
1. Outlook
2. Hotmail
3. Yahoo
4. Gmail

All the output is consistent across all email clients.

All that remains is the following:

1. Make space below the banner image and first title bar equal to that between the top of the banner image and the navigation bar
2. Close gap above the naviation bar so that the gap between the navigation bar and the crown logo is the same as the top of the page and the crown logo.

Hopefully you can help with this final adjustment.
Best,
David
DaveBaldwin-Outlook-2003.jpg
DaveBaldwin-Hotmail.jpg
DaveBaldwin-Yahoo.jpg
DaveBaldwin-Google.jpg
0
 
davidascottAuthor Commented:
SUGGESTION FOR SPACING BETWEEN CROWN AND NAVIGATION BAR:

Would it be easier if the total gap size remains the same, BUT there is a larger space above the crown. i.e. the crown is pushed down slightly so that it sits in the middle of the space between the top of the navigation bar and the top of the page.

Best,
David
0
 
Dave BaldwinFixer of ProblemsCommented:
Try adjusting the padding for the image in this statement in line 13:

<img style="padding-top: 2px;" src="http://www.elizabethrollinsscott.com/wp-content/uploads/2011/04/ers-log-nl.jpg" border="0" alt="" />

Making it larger will push the image down.  Adjust it to your taste.
0
 
davidascottAuthor Commented:
Unfortunately, it does not make any difference on the output when received by email clients
0
 
Dave BaldwinFixer of ProblemsCommented:
No, I don't believe that.  According to http://www.campaignmonitor.com/css/ , the only one that should have a problem with padding is Outlook 2007/2010.  Try this.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Untitled</title>
</head>
<body>
<div style="background-color: #000000;">
<table style="margin-top: 2px; background-color: #ffffff; border: 5px solid #3B3B3B;" cellpadding="4" width="660" align="center">
<tbody>
<tr>
<td align="center"><img style="padding-top: 12px;" src="http://www.elizabethrollinsscott.com/wp-content/uploads/2011/04/ers-log-nl.jpg" border="0" alt="" /></td>
</tr>
<tr>
<td style="color: #000000;" align="center"><strong> <span style="color: #000000;"><span style="font-family: arial,helvetica,sans-serif;"> <img src="http://www.elizabethrollinsscott.com/wp-content/uploads/2011/04/nl-bar.jpg" alt="" /><br /> <a style="color: #000000;" href="http://www.elizabethrollinsscott.com/">Home</a> &nbsp; &nbsp; &nbsp;   <a style="color: #000000;" href="http://www.elizabethrollinsscott.com/artworks">Artworks</a> &nbsp;  &nbsp;  &nbsp;     <a style="color: #000000;" href="http://www.elizabethrollinsscott.com/news/">News</a> &nbsp;  &nbsp; &nbsp;     <a style="color: #000000;" href="http://www.elizabethrollinsscott.com/about">About</a> &nbsp;  &nbsp; &nbsp;    <a style="color: #000000;" href="http://www.elizabethrollinsscott.com/shopping">Shopping</a> &nbsp;  &nbsp; &nbsp;      <a style="color: #000000;" href="http://www.elizabethrollinsscott.com/partners">Partners</a> &nbsp;  &nbsp; &nbsp;      <a style="color: #000000;" href="http://www.elizabethrollinsscott.com/contact">Contact</a> </span></span> </strong> <img src="http://www.elizabethrollinsscott.com/wp-content/uploads/2011/04/nl-bar.jpg" alt="" /></td>
</tr>
<tr>
<td align="center"><img  src="http://www.elizabethrollinsscott.com/wp-content/uploads/2011/04/ers-nl-header-1.jpg" alt="" width="600" height="165" /></td>
</tr>
<tr>
<!-- header end -->
<td>
<table cellspacing="0" cellpadding="12">
<tbody>
<tr>
</tr>
<tr>
<td style="background-color: #eeeeee;"><span style="font-family: arial,helvetica,sans-serif;"> <strong><span style="color: #000000;">Newsletter Spring 2011</span></strong> </span></td>
</tr>
<tr>
<td><span style="font-family: arial,helvetica,sans-serif;">Welcome to my first newsletter that will be published on a regular basis, covering news of what I&rsquo;ve been up to, reviews of exhibitions I&rsquo;ve attended, places of interest and inspiring places I&rsquo;ve visited, events that I&rsquo;m participating in and exhibitions and galleries where I&rsquo;m showing my work. In between, I&rsquo;ll be making regular posts to YouTube, Facebook and Twitter to keep you up to date with new artworks and the lastest progress on new projects. For all those of you who have either bought my work, visited Diesel House Studios or supported me over years &ndash; thank you. Hope you have a lovely Easter.
<p><img src="http://www.elizabethrollinsscott.com/wp-content/uploads/2011/04/ers-sig-nl.jpg" alt="" /></p>
</span></td>
</tr>
<tr>
<td style="background-color: #eeeeee;"><span style="font-family: arial,helvetica,sans-serif;"> <strong><span style="color: #000000;">My New Website Launch</span></strong> </span></td>
</tr>
<tr>
<td><span style="font-family: arial,helvetica,sans-serif;">After much blood, sweat, tears and many sleepless nights, not to mention far too much chocolate and cake and some (more) added pounds, my new website has finally been launched. There are still tons more images to load on to the site as I attempt to catalogue over a decade of work. The links above take you straight through to my site, which now includes a shop, so you can also buy work online or buy gifts for loved ones. My website address is <a href="http://www.elizabethrollinsscott.com/">www.elizabethrollinsscott.com</a> </span></td>
</tr>
<tr>
<td style="background-color: #eeeeee;"><span style="font-family: arial,helvetica,sans-serif;"> <strong><span style="color: #000000;">New Bronze Sculpture</span></strong> </span></td>
</tr>
<tr>
<td><span style="font-family: arial,helvetica,sans-serif;">
<p><img style="float: left; margin-top: 0px; margin-bottom: 0px; margin-left: 6px; margin-right: 6px;" src="http://www.elizabethrollinsscott.com/wp-content/uploads/2010/12/Sculpture-Bronze-Sculpture.jpg" alt="Bronze Sculpture" width="224" height="150" />My latest bronze that was cast in deepest, darkest Somerset last last year was The Lovers (detail left) which I based on a previous paper sculpture. I am now working on a new bronze that I&rsquo;ll reveal to you in my next newsletter. See the exciting bronze process at my foundry by clicking on <a href="http://youtu.be/JBCJL3yx5OA?hd=1">this link</a>. Further details can be found on my site under '<a href="http://www.elizabethrollinsscott.com/artworks-sculpture-bronzesculpture">bronze sculpture</a>'.</p>
</span></td>
</tr>
<tr>
<td style="background-color: #eeeeee;"><span style="font-family: arial,helvetica,sans-serif;"> <strong><span style="color: #000000;">Latest Exhibition</span></strong> </span></td>
</tr>
<tr>
<td><span style="font-family: arial,helvetica,sans-serif;">
<p><img style="float: left; margin-left: 6px; margin-right: 6px;" src="http://www.elizabethrollinsscott.com/wp-content/uploads/2010/11/NSAW.jpg" alt="NSAW" width="99" height="101" />North Somerset Arts Week (NSAW) will be taking place from April 29th to 8th May. As part of the 10 day arts festival, I will be opening my doors to friends, collectors and the public alike (see venue 100). It would be great to see you over the arts week to show you my new work. Further details can be found on the NSAW website by clicking the following link &ndash; <a href="http://www.northsomersetarts.co.uk/index.php?option=com_sobi2&amp;sobi2Task=s obi2Details&amp;catid=6&amp;sobi2Id=111&amp;Itemid=81">NSAW</a>.</p>
</span></td>
</tr>
<tr>
<td style="background-color: #eeeeee;"><span style="font-family: arial,helvetica,sans-serif;"> <strong><span style="color: #000000;">New Ceramic Collection</span></strong> </span></td>
</tr>
<tr>
<td><span style="font-family: arial,helvetica,sans-serif;">
<p><img style="float: left; margin-left: 6px; margin-right: 6px;" src="http://www.elizabethrollinsscott.com/wp-content/uploads/2011/04/n1-2.jpg" alt="" width="223" height="125" />I&rsquo;m now working on a new collection of handbuilt ceramics that will be mainly fired using my new raku kiln that my husband, David has built for me. I&rsquo;m also using new glaze recipes that I&rsquo;ve developed so it will be an exciting time. The new angel bowls have been inspired by the fabric of the Somerset countryside.</p>
</span></td>
</tr>
<tr>
<td style="background-color: #eeeeee;"><span style="font-family: arial,helvetica,sans-serif;"> <strong><span style="color: #000000;">New Commissions</span></strong> </span></td>
</tr>
<tr>
<td><span style="font-family: arial,helvetica,sans-serif;">
<p><img style="float: left; margin-left: 6px; margin-right: 6px;" src="http://www.elizabethrollinsscott.com/wp-content/uploads/2011/04/n1-3.jpg" alt="" width="217" height="145" />I was recently commissioned to produce the angel to the left, called &lsquo;Windsister&rsquo; for a health practitioner to sit in her practice room. The shot was taken in the church yard of of Montacute Church in Somerset. If you would like to commission a work, please contact me by clicking on the link at the top of the page.</p>
</span></td>
</tr>
<tr>
<td style="background-color: #eeeeee;"><span style="font-family: arial,helvetica,sans-serif;"> <strong><span style="color: #000000;">Sign Up to My Sites</span></strong> </span></td>
</tr>
<tr>
<td><span style="font-family: arial,helvetica,sans-serif;">
<p>You can keep in touch with my lastest works and activity by signing up here:</p>
<p><a href="http://www.youtube.com/user/erollinsscott"><img style="padding-right: 5px;" src="http://www.elizabethrollinsscott.com/wp-content/uploads/2011/04/youtube.jpg" border="0" alt="" align="left" /></a> Follow me on YouTube</p>
<p><a href="http://www.twitter.com/erollinsscott"><img style="padding-right: 5px;" src="http://www.elizabethrollinsscott.com/wp-content/uploads/2011/04/facebook.jpg" border="0" alt="" align="left" /></a> Follow me on Facebook - My Online Diary</p>
<p><a href="http://www.twitter.com/erollinsscott"><img style="padding-right: 5px;" src="http://www.elizabethrollinsscott.com/wp-content/uploads/2011/04/twitter.jpg" border="0" alt="" align="left" /></a> Follow me on Twitter For My Inspiration &amp; Thoughts</p>
</span></td>
</tr>
</tbody>
</table>
<span style="font-family: arial,helvetica,sans-serif;"><span> To unsubscribe <a href="http://www.elizabethrollinsscott.com/{unsubscription_url}">click here</a>. </span> </span></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

Open in new window

0
 
davidascottAuthor Commented:
I just copied the code into the email editor and sent out the test emails.  The attached file shows the result in Outlook 2003.

1. The crown logo at the top ideally needs centering
2. The space above/below the banner image ideally needs to be equal.

Thanks for your help,
David
DaveBaldwin-Outlook-2003-updated.jpg
0
 
davidascottAuthor Commented:
I thought that it may be helpful to see how the Newsletter editor renders the page as well....see attached.
DaveBaldwin-Newsletter-Output.jpg
0
 
davidascottAuthor Commented:
The crown appears to be centred.

What appears to be throwing the banner image out is the fact that whilst it is centered within its own row, the additional space between the table row (dotted line above the banner) and the space above it before the faded outline bar of the menu above makes the banner image look (when exported into HTML) to be slightly uncentered.

Therefore maybe the bottom padding below the image needs to increased to give the 'actual' output a more balance look?
0
 
Dave BaldwinFixer of ProblemsCommented:
What about the other clients?  If Outlook 2003 is the only one that is different you will either have to accept that or send out a special version for the users that have Outlook 2003.  If you're going for Exactly alike in all clients, you won't get there.

Even with web browsers that are made to display HTML, no two are Exactly alike.  Email clients are even more different because they don't have complete HTML display engines.  That link I gave you shows the differences in CSS style usage amongst the major clients.  There are other differences in HTML rendering also.
0
 
Dave BaldwinFixer of ProblemsCommented:
What is the "Newsletter editor"?
0
 
davidascottAuthor Commented:
The newsletter editor is simply a HTML area within WordPress where you can design a newsletter that's it in a nutshell.

All clients (gmail, outlook yahoo and hotmail) show the same output.  It would appear that the HTML rendering issues are common across all platforms.

Do you think that this is as good as we can get?
0
 
Dave BaldwinFixer of ProblemsCommented:
I do think that's as good as you can get across the range of email clients.  Gmail, Yahoo and Hotmail are the major webmail clients but Comcast with millions of subscribers uses Zimbra and there are few others.  Desktop clients include Outlook in several very different versions as far as HTML goes, Outlook Express, Thunderbird, Seamonkey, Apple Mail on Macs and a few others.  Plus the variations of AOL mail.  Here's a longer list http://en.wikipedia.org/wiki/Comparison_of_e-mail_clients but you don't have to worry about most of them.
0
 
davidascottAuthor Commented:
Dave,  Thanks for your help with all this. Best, David
0
 
Dave BaldwinFixer of ProblemsCommented:
You're welcome, HTML email is a bigger problem than people realize at first.  Thanks for the points.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

  • 12
  • 7
Tackle projects and never again get stuck behind a technical roadblock.
Join Now