CODEWITHSUNDEEP
htmlnewsletter
Jogn Smit
Jogn Smit

Reputation: 87

My html template is messed up in outlook

I have a simple html template that is working properly when i preview it on browser, but when i try to attach it as html in my outlook to send it as newsletter, it's all messed up... Background image isn't showing at all, my table is messed up, etc etc...

Here's my html code:

<!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>
</head>
<body>
<table background="/images/background" width="727" border="0">
  <tr>
    <td width="48">&nbsp;</td>
    <td width="314">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td colspan="4"><img src="/images/header.png" /></td>
  </tr>
  <tr>
  <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td width="49">&nbsp;</td>
  </tr>
  <tr>
  <td>&nbsp;</td>
    <td width="314" style="margin-left: 88%;"><img src="/images/aparati.png"/></td>
    <td width="377" style="margin-right: 55%"><h1 style="color: white; font-family: Verdana, Geneva, sans-serif;">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></td>
  </tr>
  <tr>
    <td valign="top"></td>
    <td><h2 style="color: white; font-family: Verdana, Geneva, sans-serif;">&nbsp;</h2></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td colspan="4"><img src="/images/footer.png" /></td>
  </tr>
</table>
</body>
</html>

Upvotes: 0

Views: 1588

Answers (4)

John
John

Reputation: 12193

When you say "attach it in Outlook", this could be the issue. If you do not send it correctly, nothing will work as expected.

Beyond that, as mentioned above, you need absolute image links (hosted) for them to show up.

You should set the width on all of your table cells (especaially the first row), otherwise Outlook is known to mess them up.

Change your color declarations to 6-digit hex also, so white should always be #FFFFFF.

Upvotes: 0

Debajyoti Das
Debajyoti Das

Reputation: 2138

You can check for browser support and supported elements at http://www.campaignmonitor.com/css/

Upvotes: 0

Davy
Davy

Reputation: 711

If you add images to an email newsletter, give the full url.

<td colspan="4"><img src="/images/header.png" /></td>

Would be

<td colspan="4"><img src="http://www.mysite.nl/images/header.png" /></td>

Not all e-mail clients take background images as well. A workaround i found to this, was to generally try to make them normal images. If possible ofcourse. Will the text in front of the background-image need to be adjusted? If not, make it a single image that you add. If it does needs to be changed, maybe it's on a bland part of the image? If so, you can cut around it, and use background-color, which is supported on e-mail clients a lot more. If neither is true, then maybe the design needs to be adjusted.

Make sure all TR's that are on top of eachother, have the same amount of TD's. Else it will mess up.

<tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td width="49">&nbsp;</td> // This one has 4 TD's
</tr>
<tr>
    <td>&nbsp;</td>
    <td width="314" style="margin-left: 88%;"><img src="/images/aparati.png"/></td>
    <td width="377" style="margin-right: 55%"></td> // This one has 3
</tr>
<tr>
    <td valign="top"></td>
    <td><h2 style="color: white; font-family: Verdana, Geneva, sans-serif;">&nbsp;</h2>
</td> // This one has 2
</tr>

If you want to use different measurements/amount of TD's, use the colspan as you have in other areas, or close the table and open a new one. Also make sure any CSS is inline, but you did that. Good luck!

Upvotes: 0

user188654
user188654

Reputation:

Background images are one of the things that are very badly supported in most email clients. GMail completely ignores them and most of the hacks you will find around are simply not worth the trouble because they are inconsistent even between different versions of the same email client.

The best you could do is probably try to rearrange your layout in a way that you can achieve a satisfying result by simply compositing image slices and background markup colors.

It is also highly advisable to use an HTML email preflight service or software to check what kind or results are to be expected in different email clients. My personal favorite is http://premailer.dialect.ca/.

Upvotes: 1

Related Questions