why are there question marks at the end of my email when opened with outlook

2.3k Views Asked by At

I am doing an email campaign through campaign monitor and for some reason there are row and rows of question marks at the very bottom when opened through a version of outlook. Does not happen on my computer but my friends it does. Image is below and so is current 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=iso-8859-1" />
<title>Casewise Newletter Template</title>
<style type="text/css">
a { color:#d13b35; text-decoration:none; }
table { font-family:Arial, Helvetica, sans-serif; }
img { border:none; }
img.right { border:none; margin:0 0 10px 10px; }
table.nav img { display:block; }
p.smallprint { text-align:center; color:#666666; font-size:11px; }
p.smallprint span { color:#d13b35; }
p.smallprint a { color:#d13b35; text-decoration:none; }
td.date { font-size:20px; color:#999999; text-align:right; text-transform:uppercase; }
td.date span { color:#CCCCCC; }
td.date em { color:#004489; font-style:normal; }
td.headlineText { font-size:18px; color:#FFFFFF; }
table.story h2 { margin:0 0 0 0; font-size:20px; font-weight:normal; color:#004489; }
table.story p { font-size:12px; color:#333333; }
table.story p a { color:#a80000; text-decoration:none; }
table.story p a:hover { text-decoration:underlined; }
td.footerPanel h2 { font-weight:normal; font-size:18px; margin:0; color:#FFFFFF; }
td.footerPanel p { font-size:12px; margin:10px 0 10px 0; color:#CCCCCC; }
</style>
</head>
<body marginheight="0" topmargin="0" marginwidth="0" leftmargin="0" bgcolor="#ebebeb">
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ebebeb">
  <tr>
    <td>

        <table width="600" border="0" cellspacing="0" cellpadding="0" align="center">
            <tr>
                <td height="46">
                <p class="smallprint">Don't miss our emails, add <span>[email protected]</span> to your address book.<br>
                    <forwardtoafriend>Forward to a Friend</forwardtoafriend>. Email look funny? <webversion>Click here</webversion> to launch in a browser</p></td>
            </tr>
                <td><img src="/images/content-top.png" width="600" height="19" alt="" style="display:block;" /></td>
            <tr>
            </tr><tr>
                <td>
                    <table width="600" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF">
                        <tr>
                            <td width="20"><img src="/images/spacer.png" width="20" height="1" /></td>
                            <td width="560" class="content">

                            <repeater>

                            <layout label='Main Feature'>                           
                                <table width="560" border="0" cellspacing="0" cellpadding="0">
                                    <tr>
                                        <td><img editable="true" src="/images/header-image.png" width="560" label='Hero Image' /></td>
                                    </tr>
                                    <tr>
                                        <td valign="top">

                                        </td>
                                    </tr>
                                    <tr>
                                        <td><img src="/images/spacer.png" width="1" height="20" /></td>
                                    </tr>
                                </table>
                            </layout>

                            <layout label='Story Image Right'>  
                                <table width="560" border="0" cellspacing="0" cellpadding="0" class="story">
                                    <tr>
                                        <td width="390" valign="top">
                                            <h2><singleline label='Story Headline'>Story Headline here...</singleline></h2>
                                            <multiline label='Story Text'>Story Text here...</multiline>
                                        </td>
                                        <td><img src="/images/spacer.png" width="20" height="1" /></td>
                                        <td valign="top"><img editable="true" src="/images/item-image.png" width="150" label='Story Image' /></td>
                                    </tr>
                                    <tr>
                                        <td><img src="/images/spacer.png" width="1" height="20" /></td>
                                    </tr>
                                </table>
                            </layout>

                            <layout label='Story Image Left'>   
                                <table width="560" border="0" cellspacing="0" cellpadding="0" class="story">
                                    <tr>
                                        <td valign="top"><img editable="true" src="/images/item-image.png" width="150" label='Story Image' /></td>
                                        <td><img src="/images/spacer.png" width="20" height="1" /></td>
                                        <td width="390" valign="top">
                                            <h2><singleline label='Story Headline'>Story Headline here...</singleline></h2>
                                            <multiline label='Story Text'>Story Text here...</multiline>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="3"><img src="/images/spacer.png" width="1" height="20" /></td>
                                    </tr>
                                </table>
                            </layout>

                            <layout label='Content with Large Image Right'> 
                                <table width="560" border="0" cellspacing="0" cellpadding="0" class="story">
                                    <tr>
                                        <td width="560" valign="top">
                                            <img editable="true" src="/images/item-image.png" width="350" label='Story Image' align="right" class="right" />
                                            <h2><singleline label='Story Headline'>Story Headline here...</singleline></h2>
                                            <multiline label='Story Text'>Story Text here...</multiline>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><img src="/images/spacer.png" width="1" height="20" /></td>
                                    </tr>
                                </table>
                            </layout>

                            <layout label='Story No Image'> 
                                <table width="560" border="0" cellspacing="0" cellpadding="0" class="story">
                                    <tr>
                                        <td width="390" valign="top">
                                            <h2><singleline label='Story Headline'>Story Headline here...</singleline></h2>
                                            <multiline label='Story Text'>Story Text here...</multiline>
                                        </td>
                                    </tr>

                                </table>
                            </layout>

                            <layout label='Two Columns No Image'>   
                                <table width="560" border="0" cellspacing="0" cellpadding="0" class="story">
                                    <tr>
                                        <td width="270" valign="top">
                                            <h2><singleline label='Story Headline'>Story Headline here...</singleline></h2>
                                            <multiline label='Story Text'>Story Text here...</multiline>
                                        </td>
                                        <td width="20" valign="top"><img src="/images/spacer.png" width="20" height="1" /></td>
                                        <td width="270" valign="top">
                                            <h2><singleline label='Story Headline'>Story Headline here...</singleline></h2>
                                            <multiline label='Story Text'>Story Text here...</multiline>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="3"><img src="/images/spacer.png" width="1" height="20" /></td>
                                    </tr>
                                </table>
                            </layout>

                            <layout label='Two Columns Image'>  
                                <table width="560" border="0" cellspacing="0" cellpadding="0" class="story">
                                    <tr>
                                        <td width="270" valign="top">
                                            <img editable="true" src="/images/two-col-image.png" width="270" label='Story Image' />
                                        </td>
                                        <td width="20" valign="top"><img src="/images/spacer.png" width="20" height="1" /></td>
                                        <td width="270" valign="top">
                                            <img editable="true" src="/images/two-col-image.png" width="270" label='Story Image' />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="3"><img src="/images/spacer.png" width="1" height="10" /></td>
                                    </tr>
                                    <tr>
                                        <td width="270" valign="top">
                                            <h2><singleline label='Story Headline'>Story Headline here...</singleline></h2>
                                            <multiline label='Story Text'>Story Text here...</multiline>
                                        </td>
                                        <td width="20" valign="top"><img src="/images/spacer.png" width="20" height="1" /></td>
                                        <td width="270" valign="top">
                                            <h2><singleline label='Story Headline'>Story Headline here...</singleline></h2>
                                            <multiline label='Story Text'>Story Text here...</multiline>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="3"><img src="/images/spacer.png" width="1" height="20" /></td>
                                    </tr>
                                </table>
                            </layout>

                            <layout label='Banner Advert 560x100'>  
                                <table width="560" border="0" cellspacing="0" cellpadding="0" class="story">
                                    <tr>
                                        <td width="560" valign="top">
                                            <img editable="true" src="/images/banner-image.png" width="560" label='Banner Advert' />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><img src="/images/spacer.png" width="1" height="20" /></td>
                                    </tr>
                                </table>
                            </layout>

                            <layout label='Register Buttons'>
                            <table width="560" border="0" cellspacing="0" cellpadding="0" class="story">
                                <tr>
                                    <td width="270" valign="top">
                                        <img editable="true" src="/images/webinar-reg-now.png" width="270" label='Register Now' alt="Register Now!" />
                                    </td>
                                    <td width="20"><img editable="true" src="/images/spacer.png" width="20" /></td>
                                    <td width="270">
                                        <forwardtoafriend><img src="/images/web-raf.png" width="270" label='Forward to a friend' alt="Forward to a friend" /></forwardtoafriend>
                                    </td>
                                </tr>
<td width="270">
                                <tr>
                                    <td colspan="3"><img src="/images/spacer.png" width="1" height="20" /></td>
                                </tr>
                            </td></table>
                            </layout>
<layout label='Social Buttons'>
<div id="ÔøΩfooterÔøΩ" align="middle">
<blog><a href="http://blog.casewise.com/" target="_blank"><img src="/images/blog.png" width="25" height="25" alt="Blog" /></a></blog>
<twitter><a href=" https://twitter.com/Casewise" target="_blank"><img src="/images/twitter.png" width="25" height="25" alt="Twitter" /></a></twitter>
<linkedin><a href="https://www.linkedin.com/company/casewise" target="_blank"><img src="/images/linkedin.png" width="25" height="25" alt="LinkedIn" /></a></linkedin>
<youtube><a href="http://www.youtube.com/user/CasewiseLimited?blend=1&ob=5" target="_blank"><img src="/images/youtube.png" width="25" height="25" alt="YouTube" /></a></youtube>
</div>

<div id="ÔøΩWebsiteÔøΩ" align="middle">
<website><a href="http://www.casewise.com" target="_blank"><img editable="true" src="/images/website.png" width="560" alt="Website" /></a></website>

</div>
</layout>
                            </repeater>





                            </td><td width="20"><img src="/images/spacer.png" width="20" height="1" /></td>
                        </tr>
                    </table>
            </td></tr>

            <td><img src="/images/content-bottom.png" width="600" height="19" alt="" style="display:block;" /></td>

            <tr>
                <td>

                    <p class="smallprint">You have received this email because <span>[email]</span> is registered with us.<br>
                        If you would no longer like to receive future emails of this nature from Casewise, please opt-out by <unsubscribe>clicking here</unsubscribe></p>
                </td>
                    </tr>

                    </table>    
 </td></tr></table>
</body>
</html>
2

There are 2 best solutions below

0
On

are you using an mysql to pull the data? if so the character encoding with php and mysql conflicts. try using utf-8

0
On

It would appear that you are mixing and matching code page data, and outlook is just trying to follow the file spec, rather than the encoding presented.

Based on your paste, the data is in UTF-8

Ôªø<!DOCTYPE

While you specified a codepage of:

charset=iso-8859-1

The issue appears to be related to the following near the bottom of your html:

ÔøΩ

In a UTF-8 display, that character would appear as:

Which is most likely what your friend is seeing.

This typically happens when an unknown character is being presented (e.g. you are trying to render a non-ANSI character when specifying an 8-bit code-page).

For this specific reason, the HTML standard uses special character codes for the common non-standard characters (such as Yen is &(&yen); or the Euro is &euro;(€)).

Just as an example of some of the difficulties of using non-standard characters, the ellipsis is 0x0133 in windows. If you look at a standard 8859-1 character map, 133 is undefined. Which means that on different Operating systems it can have different effects (some will show it as an ellipsis, some, if the specific font loaded has a character definition, will render the different character, or more typically, it is just rendered as an Unknown character, which is what you see).

But, if you use the &hellip; you get …

The real question, looking at your output is what character were you trying to use with footer and Website. I am assuming neither of those should have special characters in their IDs.

I would recommend fixing them, and switching your email to UTF-8, and try again.