Solved

HTML Email not displaying correctly

Posted on 2011-03-18
4
228 Views
Last Modified: 2012-05-11
Morning experts.

another moment of frustration where I need your help :)

I have created a simple email with graphics etc using HTML code which looks find in dreamweaver and online www.disco-magic.co.uk/sgsemail1.html

however when I send to my outlook account the graphics dissapear???  See example attached and here - https://app.e2ma.net/app/view:CampaignPublic/id:36833.6997391722/rid:c8e9fb616184390b22c812c8eb6ef6af

WHY ?????????
TEMP.jpg
0
Comment
Question by:heijmer
  • 2
4 Comments
 
LVL 10

Expert Comment

by:Bawer
ID: 35165047
make sure outlook downloads the graphical contents and those are not blocked by the outlook options, sometime outlook also takes time to get the contents no matter how good an internet connection is.
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 35172829
You aren't using full URLs for image sources in all cases:

background="SGS EMAIL JPG.jpg"
0
 

Author Comment

by:heijmer
ID: 35182423
Ok its still not working :( ;( :(

I have re-coded to show correct urls for images (coding is not my forte!!!) and when I send to outlook it still doesn't show the border around the frame...  which unfortunatly my boss is insisting on...

why!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

coding is attached below...
<!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>Untitled Document</title>
<style type="text/css">
<!--
.buttons {
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-right-style: solid;
	border-left-style: none;
	border-top-color: #7D868E;
	border-right-color: #FFFFFF;
	border-bottom-color: #FFFFFF;
	border-left-color: #FFFFFF;
}
.border {
	border: thin solid #666666;
}
.style3 {font-family: Arial, Helvetica, sans-serif}
.style4 {font-size: 14px}
-->
</style>
</head>

<body>
<table width="600" height="745" border="0" align="center" cellpadding="0" cellspacing="0" background="http://www.disco-magic.co.uk/sgsemailbackgroundjpg.jpg">
  <tr valign="top" background="http://www.disco-magic.co.uk/sgsemailbackgroundjpg.jpg">
    <td height="717" background="SGS EMAIL JPG.jpg" class="style3"><table width="600" height="140" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td><table width="600" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="8">&nbsp;</td>
              <td width="577"><p><img src="http://www.disco-magic.co.uk/Sliced/images/sgsemailheadersliced.jpg" alt="Header" width="577" height="69" /><a href="http://www.sgsmith.co.uk/new/mercedes-benz-vans.aspx"><img src="http://www.disco-magic.co.uk/Sliced/images/sgsnewbutton.gif" alt="newbtn" width="101" height="39" border="0" /></a><a href="http://www.sgsmith.co.uk/UsedQuery.aspx"><img src="http://www.disco-magic.co.uk/Sliced/images/sgsusedbutton.gif" alt="used button" width="93" height="39" border="0" /></a><a href="http://www.sgsmith.co.uk/promotions/mercedes-benz-vans.aspx"><img src="http://www.disco-magic.co.uk/Sliced/images/sgspromotionsbutton.gif" alt="promos" width="114" height="39" border="0" /></a><a href="http://www.sgsmith.co.uk/service/mercedes-benz-vans.aspx"><img src="http://www.disco-magic.co.uk/Sliced/images/sgsservicebutton.gif" alt="service" width="55" height="39" border="0" /></a><a href="http://www.sgsmith.co.uk/parts-accessories/mercedes-benz-vans.aspx"><img src="http://www.disco-magic.co.uk/Sliced/images/sgspartsbutton.gif" alt="parts" width="131" height="39" border="0" /></a><a href="http://www.sgsmith.co.uk/find-us/mercedes-sydenham.aspx"><img src="http://www.disco-magic.co.uk/Sliced/images/sgscontactbutton.gif" alt="contact" width="83" height="39" border="0" /></a><img src="http://www.disco-magic.co.uk/Sliced/images/sgsvanrange.jpg" alt="vanrange" width="577" height="99" /></p>
                </td>
              <td width="8">&nbsp;</td>
            </tr>
          </table></td>
        </tr>
      </table>
      <table width="600" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="80">&nbsp;</td>
          <td width="510"><p class="style4">Dear Mr Effenberg</p>
              <p class="style4">Just a note to thank you for choosing SG Smith Motors for the recent work that was required on your Mercedes-Benz, (registration number LV10EZR). I do realise that our customers have a choice when choosing somewhere to service their vehicle and so I am pleased to have been able to serve you on this occasion.</p>
            <p class="style4">I do hope that we provided you with a service you would consider to be 5 out of 5 as anything less is considered a failure. I also hope that you would be happy to recommend us to others.</p>
            <p class="style4">On the other hand if, in any way, you were unhappy with the service provided, then please let me know so that I can put things right.</p>
            <p class="style4">You can email me on <a href="mailto:nikki.watton@sgsmith.co.uk">nikki.watton@sgsmith.co.uk</a>.</p>
            <p class="style4">Yours sincerely</p>
            <p class="style4"> </p>
            <p class="style4">Nikki Watton<br />
              Aftersales Manager</p>
          <p class="style4">PS. You may receive a telephone survey from Mercedes-Benz UK regarding your experience. If you were happy please let them know, if were you were not please let me know!</p></td>
          <td width="80">&nbsp;</td>
        </tr>
      </table></td>
  </tr>
</table>


<p class="style3">
  <map name="Map" id="Map">
    <area shape="rect" coords="509,85,573,109" href="http://www.sgsmith.co.uk/find-us/mercedes-sydenham.aspx" alt="contact" />
    <area shape="rect" coords="377,85,498,112" href="http://www.sgsmith.co.uk/parts-accessories/mercedes-benz-vans.aspx" alt="Parts" />
    <area shape="rect" coords="322,85,366,112" href="http://www.sgsmith.co.uk/service/mercedes-benz-vans.aspx" alt="service" />
    <area shape="rect" coords="207,85,313,112" href="http://www.sgsmith.co.uk/promotions/mercedes-benz-vans.aspx" alt="Special Promos" />
    <area shape="rect" coords="22,85,106,112" href="http://www.sgsmith.co.uk/new/mercedes-benz-vans.aspx" alt="New MB" />
    <area shape="rect" coords="19168,2003,21983,2631" href="http://www.sgsmith.co.uk/service/mercedes-benz-vans.aspx" alt="Link to Service Facilities" />
    <area shape="rect" coords="12399,1932,18688,2702" href="http://www.sgsmith.co.uk/promotions/mercedes-benz-vans.aspx" alt="Special Promotions" />
    <area shape="rect" coords="30369,2003,34682,2771" href="http://www.sgsmith.co.uk/find-us/mercedes-sydenham.aspx" alt="Link to Contact Us" />
    <area shape="rect" coords="22702,1980,29710,2631" href="http://www.sgsmith.co.uk/parts-accessories/mercedes-benz-vans.aspx" alt="Link to Parts and accessories" />
    <area shape="rect" coords="1317,2003,6469,2702" href="http://www.sgsmith.co.uk/new/mercedes-benz-vans.aspx" alt="link to New Vehicles" />
    <area shape="rect" coords="7068,1955,11860,2654" href="http://www.sgsmith.co.uk/UsedQuery.aspx" alt="Used Vehicle Search" />
    <area shape="rect" coords="114,85,198,112" href="http://www.sgsmith.co.uk/UsedQuery.aspx" alt="Used Search" />
  </map>
</p>
</body>
</html>

Open in new window

0
 
LVL 70

Accepted Solution

by:
Jason C. Levine earned 500 total points
ID: 35182518
You shouldn't use "normal" CSS declaration (in the head) for emails as not every email client honors it.  All CSS should be done inline:

<table width="600" height="745" border="0" align="center" cellpadding="0" cellspacing="0" background="http://www.disco-magic.co.uk/sgsemailbackgroundjpg.jpg" style="border: thin solid #666666;">

Even then, not every email client will honor every CSS declaration.  
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Suggested Solutions

Learn more about how the humble email signature can be used as more than just an electronic business card. When used correctly, a signature can easily be tailored for different purposes by different departments within an organization.
This process describes the steps required to Import and Export data from and to .pst files using Exchange 2010. We can use these steps to export data from a user to a .pst file, import data back to the same or a different user, or even import data t…
This Experts Exchange video Micro Tutorial shows how to tell Microsoft Office that a word is NOT spelled correctly. Microsoft Office has a built-in, main dictionary that is shared by Office apps, including Excel, Outlook, PowerPoint, and Word. When …
To add imagery to an HTML email signature, you have two options available to you. You can either add a logo/image by embedding it directly into the signature or hosting it externally and linking to it. The vast majority of email clients display l…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now