Skip navigation
Currently Being Moderated

Email Template Help

Apr 19, 2012 7:58 PM

Hey everyone.  I've search for a long while about this topic but didn't find an answer, so here goes:

 

I'm creating my own custom emai template to be used in Outlook 2003.  I've created 3 tables all of the same width.  One as a header (with an image centered) another as the body and the last as a footer with a custom signature and 2 graphics linked to my FB & Twitter pages.  I'm almost completed but there are two nagging problems:

 

 

1. I can't figure out how to format the "body" table with single line spacing.  (remember I want this field to be blank until text is added when an email is written).  Everytime I save the .html file and open it in Outlook it reverts to double spacing.  I know this can be done because all of the standard Outlook stationary html files use single spacing.

 

2. I'd like the 2 bottom graphics to be immeadiately underneath the signature.  As it is the graphics are a few lines below and I can't get them to move up without affecting the signature text.

 

Thanks in advance.  I really appreciate your efforts.

 

- Solan

 

HERE'S THE CODE (I hope pasting it here is appropriate)

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>H2H Email Template</title>

<style type="text/css">

<!--

body,td,th {

          font-family: Arial, Helvetica, sans-serif;

          font-size: 12pt;

          color: #020202;

}

-->

</style></head>

 

 

<body>

<table width="98%" border="0" cellspacing="0" cellpadding="0">

  <tr>

    <td align="center"><img src="http://www.h2htpe.com/Images/H2HLogo.png" alt="H2H The Perfect Element" border="0" usemap="#Map" longdesc="http://www.h2htpe.com" /></td>

  </tr>

</table>

<table width="98%" border="0" cellspacing="0" cellpadding="0">

  <tr>

    <td class="Arial" style="font-family: Arial, Helvetica, sans-serif; font-size: 12pt;"> </td>

  </tr>

</table>

<span class="Arial"><span class="Arial">Sean Solan<br>

President, H2Htpe</span></span>

<p><a href="https://www.facebook.com/h2htpe" target="_blank"><img src="http://www.h2htpe.com/Images/Facebook.png" alt="Facebook.com/h2htpe" width="35" height="35" longdesc="http://facebook.com/h2htpe" /></a><a href="https://twitter.com/#!/H2Htpe" target="_blank"><img src="http://www.h2htpe.com/Images/Twitter.png" alt="twiiter.com/h2htpe" width="35" longdesc="https://twitter.com/#!/H2Htpe" /></a></p>

 

 

<map name="Map" id="Map">

  <area shape="rect" coords="182,147,275,156" href="http://www.h2htpe.com" target="_blank" alt="www.h2htpe.com" />

</map>

</body>

</html>

 
Replies
  • Currently Being Moderated
    Apr 20, 2012 5:27 AM   in reply to S.Solan

    Hi Sean -

     

    Lose the image map and use an ordinary hyperlink as you did with your social links. 

    (image Maps are poorly supported and not at all in Gmail)


    Lose the style block in the head section and replace with inline styling like

    <body style="font-family: Arial, Helvetica, sans-serif; font-size: 12pt; color: #020202;">

    (embedded CSS is poorly supported and not at all in Eudora, Old GMail or New GMail)

     

    When typing in your stationery, use ctl+enter for line breaks    

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 20, 2012 6:47 AM   in reply to Ken Binney

    Ken Binney wrote:

     

    Hi Sean -

     

    Lose the image map and use an ordinary hyperlink as you did with your social links. 

    (image Maps are poorly supported and not at all in Gmail)


       

     

    Ken, image maps are supported in Google Mail.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 20, 2012 6:54 AM   in reply to S.Solan

    2. I'd like the 2 bottom graphics to be immeadiately underneath the signature.  As it is the graphics are a few lines below and I can't get them to move up without affecting the signature text.

     

     

    Add some inline css (style="margin: 0; padding: 0;") to the <p> tag that your images are insert in: (see below)

     

    <p style="margin: 0; padding: 4px 0 0 0;"><a href="https://www.facebook.com/h2htpe" target="_blank"><img src="http://www.h2htpe.com/Images/Facebook.png" alt="Facebook.com/h2htpe" width="35" height="35" longdesc="http://facebook.com/h2htpe" /></a><a href="https://twitter.com/#!/H2Htpe" target="_blank"><img src="http://www.h2htpe.com/Images/Twitter.png" alt="twiiter.com/h2htpe" width="35" longdesc="https://twitter.com/#!/H2Htpe" /></a></p>

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 20, 2012 7:11 AM   in reply to osgood_

    So it seems

    When Gmail began, Hotmail quit supporting imagmaps

    Thanks for the update

     

    Still remain a bunch of other reasons to not use maps, especially here where you can just link the image.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 20, 2012 7:15 AM   in reply to Ken Binney

    Ken Binney wrote:

     

    So it seems

    When Gmail began, Hotmail quit supporting imagmaps

    Thanks for the update

     

    Still remain a bunch of other reasons to not use maps, especially here where you can just link the image.

     

    We'll I had not actually check myself recently until you bought it up but having just used a few image maps on an html email I've done recently I thought I had better revist GMail,  they worked.

     

    I agree about where you can use a simple <a></a> tag to link then its preferable. I see so many html emailer I get that do use image maps though from well respected big name companies.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 20, 2012 7:48 AM   in reply to osgood_

    I consider the use of Image Maps bad practice as there really are no benefits to using them - except for the fact you get away with one image rather than 3,4 or 5. I actually can't remember the last time I saw one come through my inbox.

     

    Some clarification on the coverage (as at June 2011): http://www.campaignmonitor.com/blog/post/3475/image-maps-in-html-email /

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 20, 2012 7:54 AM   in reply to osgood_

    <soapbox>

    I think we have to be vigilant about assessing the world of our users from our own experience.

    I sit here in New York, smugly gazing at my 4 over 4 monitor wall, with my 40Mbps optical internet connection,

    and it's sooooo  easy to forget the overwhelming numbers of blokes in the villages with a slow connection, an older computer with images turned off in his email program. He and his grandma are our clients' customers.

    Please Lord, spare us from our own technical arrogance.

    </soapbox>

     

    *grin*

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 20, 2012 7:55 AM   in reply to Rik Ramsay

    Rik Ramsay wrote:

     

    I consider the use of Image Maps bad practice as there really are no benefits to using them - except for the fact you get away with one image rather than 3,4 or 5. I actually can't remember the last time I saw one come through my inbox.

     

     

    Really, I get them through on a daily basis. I agree that it may be because you don't have the necessity to slice the image/s up into more parts which is obviously easier. I'm just suprised by the number of well-know companies that use them......these are'nt your Grannies Basket Weaving companies.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 20, 2012 8:25 AM   in reply to S.Solan

    Afraid I don't understand your last post.

    If you are using Outlook email stationery, what are you "saving" ?

    It's an outgoing email message and gets saved in your "Sent Items mailbox.

     

    See my email message to you

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 20, 2012 8:36 AM   in reply to S.Solan

    add a non-breaking space between the <td></td> tags & nbsp;

     

    Close the gap between the & and n

     

     

    OR

     

    prop the cell open with a transparent spacer gif.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 20, 2012 9:51 AM   in reply to S.Solan

    A non breaking space code is - & nbsp; (without the space between & and n) if I type it with the space deleted it will disapear in this forum.

     

    All you need to do is insert the non-breaking space code between the <td></td> cell of the center table.

     

    However it might be better to insert a small 1 pixel wide x 20 pixel high transparent gif image in the cell instead of the non-breaking space. This will prop open the cell.

     

    Try both and see what works best.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 20, 2012 11:18 AM   in reply to S.Solan

    S.Solan wrote:

    is there a way to lock my top table (header) so that it can't be deleted or have any text added to it?

        

    Are the other users careless enough to not know where to place their cursor? 

    I'm sure you dont mind if the recipient deletes the picture when replying. A Avoid the issue with ny picture positioned at the bottom of the stationery.

    sean.jpg

     

    I'd suggest you make your table a fixed width and make top picture wide enough to fill the entitre cell. 

     

    That would prevent adding text, but if they are going to go to all the trouble to select the image and then hit the delete key, they must really hate it *grin*

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 20, 2012 12:10 PM   in reply to S.Solan

    Sorry Pal:

     

    I just don't know.  Seems a lot to ask an email client to process

     

    Let's hope someone wiser than I jumps in here.

     

    Best

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points