SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Html email images not displaying

    Hi guys,

    I used Mozilla Thunderbird to send the following email to myself, (it is one of the few email clients that lets you compose in html format) but the images weren't showing when I checked my hotmail, they weren't blocked ,they simply weren't there. I have used full urls, don't really understand it, could possibly be my table code as I normally design in pure css so I've brought it to the experts on here:

    Code:
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>Who we are | Potential Club</title>
        <meta name="generator" content="Inspire 2.0.3"/>
        <meta name="generator" content="Woo Framework Version 2.9.08"/>
        <link rel="shortcut icon" href="http://potentialclub.co.uk/wp-content/uploads/2010/09/favicon.bmp"/>
      </head>
      <body style="margin:0;padding:0;min-width: 940px;font: 14px/20px &quot;Droid Sans&quot;, &quot;Myriad Pro&quot;, Helvetica, Arial, sans-serif;">
    
              <table cellspacing="0" style="width:70%;padding:40px;height:170px;background:url(http://potentialclub.co.uk/wp-content/themes/inspire/images/bg.jpg);">
                <tr>
                 <td>
                           <h1 style="color:#fff;font-size:40px;">Potential Club</h1>
                          <span style="color: #4EA0F4;font: italic 14px "Droid Serif", "Georgia", serif;">Potential Club is an organisation inspired by what is possible</span>
                 </td>
                </tr>
              </table>
    
               <table style="width:70%;border:solid 3px #4EA0F4;" cellspacing="0" cellpadding="0">
                <tr>
                   <td valign="center" style="padding-left:40px;border-bottom: 1px solid #AAAAAA;color: #666666;line-height: 50px;width:100%;background: url(http://potentialclub.co.uk/wp-content/themes/inspire/images/bg-breadcrumb.png) repeat-x;">
        <h3 style="margin:0;">FA0 Helen @ P.R. Company</h3>
                     
                   </td>
                        <tr>
                                  <td style="padding: 50px 0 30px;border-bottom: 1px solid #AAAAAA;color: #000;width:100%;background:#fff url(http://potentialclub.co.uk/wp-content/themes/inspire/images/bg-content-top.png) repeat-x;">
                                 <p style="padding-left:40px;">Dear Helen</p>
    
    
    
                                  <p style="padding-left:40px;">You mentioned you would like the following:</p>
                                  
                                   <ul style="padding-left:60px;padding-right:40px;font-size:16px;list-style-type:square;">
                                   
                                   <li style="margin:5px 0;color: #00f;font-weight:400;">Better or more open communication. Tell me what you think that means. </li>
                                  <li style="margin:5px 0;color: #00f;font-weight:400;">Not to have the tense days. Explain in more detail so we can understand the symptoms. </li>
    
                                  <li style="margin:5px 0;color: #00f;font-weight:400;">Better or more open communication. Tell me what you think that means. </li>
                                  <li style="margin:5px 0;color: #00f;font-weight:400;">You want more structure e.g. roles, responsibilities, procedures. This is an important area and one that will allow you to breathe. Once the procedures are in place and people have more clarity things should become much easier. All that is left t do from there is create good habits for a few months and you should create a sense of calm and clarity in the office.</li>
    
                                  
                                  
                                  </ul>
                                  <p style="padding-left:40px"><strong >Please take some time these need to be specific measurable results. </strong><br/><br/>Follow the hyperlink below through to our survey: </p>
                                  <a style="margin-left:100px;color:#00f;" href="http://potentialclub.co.uk/contact-us/">Potential Club Client Survey</a>
                                   </td>
    
                                  </tr>
                </tr>
                </table>
                
               <table style="width:70%;" cellspacing="0">
                <tr>
                   <td style="background:#282828 url(http://potentialclub.co.uk/wp-content/themes/inspire/images/bg-content-top.png) repeat-x;height:100px;">
                   <p style="color:#ccc;padding-left:50px;font: 12px/18px 'Droid Sans','Myriad Pro',Helvetica,Arial,sans-serif;">Copyright 2012 Potential Club</p>
                    </td>
    
                </tr>
                </table>
        <!-- /#wrapper -->
      </body>
    </html>
    "Persistence is the path to perfection"

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    You can't rely on background images any more. Outlook 2007 onwards will not render any background images in HTML email, in another one of those great leaps forward where they destroy basic functionality and compatibility that they used to allow, specifically in order to destroy any future hope of interoperability or compatibility, with no consideration for the negative consequences this will have on their sufferers users. The only way you can put images into an HTML email these days is with <img> tags.

  3. #3
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What a ridiculous thing to do! All the dodgy versions of IE were bad enough.
    Thanks for you help anyway.
    "Persistence is the path to perfection"


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •