Browser / Webmail inconsistencies

I have been searching for several days to find a solution to getting some consistency for a newsletter campaign that a customer wishes to implement.

He uses Outlook 2010 as his desktop mail client and I have created a stationary template as follows :

<!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=us-ascii" />
  <title>Test Newsletter</title>
  <style type="text/css">
/*<![CDATA[*/
        body { line-height: 1.5em; background-color: white; color: black; font-style: normal; font-weight: normal; font-size: 12px; font-family: Verdana, Helvetica, Arial; }
        .centered {text-align: center}
        .back_black {background-color: black}
        .back_white {background-color: white}
        .back_red {background-color: red}
        .bold {font-weight: bold}
        .align_left {text-align: left}
        p { color: black; font-style: normal; font-weight: normal; font-size: 12px; font-family: Verdana, Helvetica, Arial; line-height: 1.5em; } 
        td { line-height: 1.5em; color: black; font-style: normal; font-weight: normal; font-size: 12px; font-family: Verdana, Helvetica, Arial } 
        ul, ul li { line-height: 1.5em; color: black; font-style: normal; font-weight: normal; font-size: 12px; font-family: Verdana, Helvetica, Arial; } 
  /*]]>*/
  </style>
  <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
</head>

<body>
  <div class="centered">
    <table border="0" cellpadding="0" cellspacing="0" width="550">
      <tr>
        <td valign="top">
          <table border="0" cellpadding="1" cellspacing="0" width="100%">
            <tr>
              <td class="c6">
                <table class="back_red" width="550" border="0" cellspacing="0"
                cellpadding="0">
                  <tr>
                    <td>
                      <div class="centered">
                        <br />
                          Placeholder for Company Logo<br />
                        <br />
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <div class="centered">
                        <br />
                          Placeholder for Title<br />
                        <br />
                      </div>
                    </td>
                  </tr>
                </table>
                <table border="0" cellpadding="0" cellspacing="0" width="100%">
                  <tr>
                    <td valign="top" rowspan="3">
                      <table border="0" cellpadding="20" cellspacing="0" width="100%">
                        <tr>
                          <td align="left" class="back_white">
                            Introductory Text.
                            <p>
                            This text that should always be aligned to the 
                left, but for some reason there are some webmail / 
                browser combinations that cause all sorts of 
                problems which I have been attempting in vain to 
                resolve.</p>
                            <p class="bold">External Links:</p>
                            <ul>
                              <li><a href="#">Link 1</a></li>
                            </ul>
                            <p class="align_left">
                            I would like to thank you for 
                taking the time to review what the cause of this 
                problem might be. I've spent far too many hours 
                trying to resolve this matter.</p>
                          </td>
                        </tr>
                      </table>
                      <div class="back_red" align="center">
                        <br />
                          Placeholder for Footer<br />
                        <br />
                      </div>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </div>
</body>
</html>

The desired result is to have the message centered on the page, with the body text left aligned. The majority of his target audience are remote workers and as such tend to favour the use of webmail services rather than desktop email client solutions, so the campaign needs to be viewed with a reasonable level of consistency using Firefox and Internet Explorer as browsers with Google, Yahoo and Hotmail services.

The above template produces the following

Firefox / Google (layout as desired)
http://skygod-webservices.co.cc/mail/Firefox-Google.png

Firefox / Hotmail (left aligned message - acceptable)
http://skygod-webservices.co.cc/mail/Firefox-Hotmail.png

Firefox / Yahoo (layout as desired)
http://skygod-webservices.co.cc/mail/Firefox-Yahoo.png

IE / Google (body text centered - not acceptable)
http://skygod-webservices.co.cc/mail/IE-Google.png

IE / Hotmail (body text centered - not acceptable)
http://skygod-webservices.co.cc/mail/IE-Hotmail.png

IE / Yahoo (layout as desired)
http://skygod-webservices.co.cc/mail/IE-Yahoo.png

Any assistance on how to resolve the IE issues gratefully received.
(The IE results are the same in both IE8 and IE9 Beta)

Thanks

George

wilbertheinen wilbertheinen, 6 years ago

You can use the following style for centering in hotmail and other clients:

body {
    width: 100% !important;
    display: block !important;
}

for clients who doesn't support css in the head or only supporting inline-styles you can add the following inline-style on the body-tag:

<body style="display: block !important;">

For text-alining I always use the following:

<td align="left">

This should do the trick for centering the e-mail and aligning the text left.

For more tips:

http://www.campaignmonitor.com/blog/post/3228/a-fix-to-background-color-and-alignment-issues-in-windows-live-hotmail/


Create a Clang!
skygod, 6 years ago

Thanks for the response.

to the style in the head I have added

body { width: 100% !important; display: block !important; }
.ReadMsgBody { width: 100%;}
.ExternalClass {width: 100%;}

and to the <body ... statement, I have added

display: block !important;

Another suggestion I received was to copy all the css to be inline, so the <td> is now

<td class="back_white" align="left" bgcolor="white" style="font-weight: normal; font-size: 12px; background-color: white; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 1.5em; color: black; font-style: normal;">

Unfortunately, the result is that everything still looks the same as before :-(

wilbertheinen wilbertheinen, 6 years ago

I've looked at your code and you are using a lot of code ;-). I never work with <div> and <p> in e-mail html. Maybe you can try the following and compare it with your code. I hope this works for you!

Good luck!

<!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>TEST</title>
</head>
<body bgcolor="#ffffff" style="margin: 0; padding: 0; display: block !important;">
<style type="text/css">
body {
    width: 100% !important;
    display: block !important;
    margin: 0;
    padding: 0;
}
</style>
<table width="550" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td width="550" height="55" align="center" valign="middle" bgcolor="#ff0000" style="font-size: 12px; font-family: Verdana, Helvetica, Arial; color:#000000;">Placeholder for Company Logo</td>
  </tr>
  <tr>
    <td width="550" height="55" align="center" valign="middle" bgcolor="#ff0000" style="font-size: 12px; font-family: Verdana, Helvetica, Arial; color:#000000;">Placeholder for Title</td>
  </tr>
  <tr>
    <td><table width="550" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="20">&nbsp;</td>
          <td width="520" align="left" valign="top" style="font-size: 12px; font-family: Verdana, Helvetica, Arial; color:#000000;"><br />
            Introductory Text.<br />
            &nbsp;<br />
            This text that should always be aligned to the 
            left, but for some reason there are some webmail / 
            browser combinations that cause all sorts of 
            problems which I have been attempting in vain to 
            resolve.<br />
            &nbsp;<br />
            <strong>External Links:</strong>
            <ul>
              <li><a href="#">Link 1</a></li>
            </ul>
            I would like to thank you for 
            taking the time to review what the cause of this 
            problem might be. I've spent far too many hours 
            trying to resolve this matter.<br />
            &nbsp;<br /></td>
          <td width="10">&nbsp;</td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td width="550" height="55" align="center" valign="middle" bgcolor="#ff0000" style="font-size: 12px; font-family: Verdana, Helvetica, Arial; color:#000000;">Placeholder for Footer</td>
  </tr>
</table>
</body>
</html>

Create a Clang!
skygod, 6 years ago

Thanks,

I'll test this tomorrow morning and see what happens.

George

skygod, 6 years ago

I've now stripped the code down to the minimum, but to no avail. Internet Explorer with Google Mail & Hotmail still center what should be left aligned text and Firefox with Hotmail still displays the whole message aligned to the left.

I've tried just having the left aligned text in a left aligned <td> and also by inserting a new table as shown in the code below.

Has anybody actually had any success accomplishing this?

<!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>TEST</title>
</head>
<body bgcolor="#ffffff" style="margin: 0; padding: 0; display: block !important;">
<style type="text/css">
body {
    width: 100% !important;
    display: block !important;
    margin: 0;
    padding: 0;
}
</style>
<table width="550" border="0" cellspacing="0" cellpadding="0" align="center">
    <tr>
        <td>
            <table width="550" border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td width="550" align="center" valign="middle" bgcolor="#ff0000" style="font-size: 14px; font-family: sans-serif; color:#000000;">
                    Centered Text (Black on Red)
                    </td>
                </tr>
                <tr>
                    <td>
                        <table width="550" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td width="30">&nbsp;</td>
                                <td align="left" width="490" height="55" valign="middle" style="font-size: 12px; font-family: sans-serif; color:#000000;">
                                Left Aligned Text (Black On White) using &lt;td&gt; to the left and right in order to simulate 30px margins.
                                </td>
                                <td width="30">&nbsp;</td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td width="550" align="center" valign="middle" bgcolor="#00FF00" style="font-size: 14px; font-family: sans-serif; color:#000000;">
                    Centered Text (Black on Green)
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
</body>
</html>
wilbertheinen wilbertheinen, 6 years ago

@skygod

Strange... All the emails that I've created are centered in every major client. I've made some small corrections on the code above:

<!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>TEST</title>
</head>
<body bgcolor="#ffffff" style="margin: 0; padding: 0; display: block !important; width: 100% !important;">
<style type="text/css">
body {
    width: 100% !important;
    display: block !important;
    margin: 0;
    padding: 0;
}
</style>
<table width="550" border="0" cellspacing="0" cellpadding="0" align="center">
    <tr>
        <td align="left">
            <table width="550" border="0" align="left" cellpadding="0" cellspacing="0">
                <tr>
                    <td width="550" align="center" valign="middle" bgcolor="#ff0000" style="font-size: 14px; font-family: sans-serif; color:#000000;">
                    Centered Text (Black on Red)
                    </td>
                </tr>
                <tr>
                    <td>
                        <table width="550" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td width="30">&nbsp;</td>
                                <td align="left" width="490" height="55" valign="middle" style="font-size: 12px; font-family: sans-serif; color:#000000; text-align:left">
                                Left Aligned Text (Black On White) using &lt;td&gt; to the left and right in order to simulate 30px margins.
                                </td>
                                <td width="30">&nbsp;</td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td width="550" align="center" valign="middle" bgcolor="#00FF00" style="font-size: 14px; font-family: sans-serif; color:#000000;">
                    Centered Text (Black on Green)
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
</body>
</html>

Create a Clang!
skygod, 6 years ago

Many thanks for all your effort in trying to resolve this matter. I have taken the code that you supplied and here are the various renderings that are produced in the webmail clients :

http://skygod-webservices.co.cc/mail/screenshots.png

I am beginning to believe that this could well be an issue with the Outlook 2010 mail client being used to send the email as it uses Word 2010 as it's HTML rendering engine and I'm guessing that it adds a lot of proprietary M$ 'junk'.

After 4 days of battling with this, I'm getting really annoyed, but the customer really wants the body of message centered and not left aligned and wants to continue using Outlook as his primary client.

I'll look to download Thunderbird to use as a mail client and try sending the same message using that as a client and will publish the results once I've done.

wilbertheinen wilbertheinen, 6 years ago

Ah you're sending it from outlook. Than a lot of junkcode is added to your code indeed. You should better use an application for sending newsletters and campaigns:

You can use applications like/from Clang, Campaign Monitor, Mailchimp for your email campaigns.


Create a Clang!
skygod, 6 years ago

@wilbertheinen

Many thanks for all your patience. It IS Outlook 2010 client that causes the problem, as sending the HTML template from Thunderbird renders correctly in all WebMail clients.

4 days of my life wasted thanks to Micro$oft

(Now to get my customer convinced that he needs to change his desktop email client if he wants to send 'stylish' emails.)

George

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098