5

I having some issues with a client of mine. I've built (not designed) an email template for them to use with Create/Send. I've used the design testing service from Create/Send and all is looking as intended. However, when the client views the email in Outlook 2003 the text formatting is missing (see screen grabs).

There is very little CSS in the head of the document and certainly nothing that should have this affect as much of the styling is done inline.

Does anyone have any ideas?

As intended

alt text http://citywest.bangtest.co.uk/stackoverflow/okay.png

OutLook 2003

alt text http://citywest.bangtest.co.uk/stackoverflow/bad.png

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

City West e-Bulletin

    <style type="text/css" media="screen">
        * { font-family: Arial, san-serif; }
        a {color:#000000;}
        a img {border:none;}
        h3 a { color: #BD2C16; }
        .topbannercopy a {color:#ffffff;}
        .unsub a {color: #555555; text-decoration:none;}
        .unsub a:hover {text-decoration:underline;}
    </style>

</head>

<body style="text-align: left;">

    <table border="0" bgcolor="#ffffff" cellspacing="0" cellpadding="0" width="591" align="center" style="font-family: Arial, san-serif;">
        <tr bgcolor="#e95c55">
            <td colspan="4"><img src="img/top-trust.gif" alt="City West Housing Trust. e-Bulletin for Staff" width="591" height="195"></td>
        </tr>
        <tr bgcolor="#e95c55">
            <td style="color: #ffffff; font-size: 11px; padding-left: 10px; padding-bottom: 5px;" colspan="4"><$description default=''$></td>
        </tr>
        <tr>
            <td bgcolor="#e95c55" colspan="4">
                <img src="<$imagesrc link='true'$>" alt="read more" width="591">
            </td>
        </tr>
        <tr bgcolor="#e95c55" valign="top" style="padding: 10px;">
            <td colspan="1" style="color: #BD2C16; padding-left: 10px;">
                <h3 style="font-size: 15px;"><$title link='true'$></h3>
            </td>
            <td colspan="3" style="color: #ffffff; font-size: 12px; padding-left: 20px;"><span class="topbannercopy"><$description default=''$></span></td>
        </tr>
        <tr valign="top" style="font-size: 10px;">
            <td width="133" style="padding-top: 10px;">
                <img src="<$imagesrc link='true'$>" alt="read more" width="133" height="118">
                <h3 style="color: #BD2C16; margin-bottom: 5px;"><$title link='true'$></h3>
            </td>
            <td width="133" style="padding-top: 10px; padding-left: 20px; padding-right: 9px;">
                <img src="<$imagesrc link='true'$>" alt="read more" width="133" height="118">
                <h3 style="color: #BD2C16; margin-bottom: 5px;"><$title link='true'$></h3>
            </td>
            <td width="133" style="padding-top: 10px; padding-left: 9px; padding-right: 20px;">
                <img src="<$imagesrc link='true'$>" alt="read more" width="133" height="118">
                <h3 style="color: #BD2C16; margin-bottom: 5px;"><$title link='true'$></h3>
            </td>
            <td width="133" style="padding-top: 10px;">
                <img src="<$imagesrc link='true'$>" alt="read more" width="133" height="118">
                <h3 style="color: #BD2C16; margin-bottom: 5px;"><$title link='true'$></h3>
            </td>
        </tr>
        <tr valign="top" style="font-wieght: bold; padding-bottom: 10px; font-size: 12px;">
            <td width="133">
                <p><$description default=''$></p>
            </td>
            <td width="133" style="font-wieght: bold; padding-left: 20px; padding-right: 9px;">
                <p><$description default=''$></p>
            </td>
            <td width="133" style="font-wieght: bold; padding-left: 9px; padding-right: 20px;">
                <p><$description default=''$></p>
            </td>
            <td width="133">
                <p><$description default=''$></p>
            </td>
        </tr>
        <tr>
            <td rowspan="2" colspan="1" valign="top"><img src="img/slash-left.gif" width="133" height="50" alt=""></td>
            <td rowspan="1" colspan="3" valign="top"><img src="img/slash-right.gif" width="458" height="42" alt=""></td>
        </tr>
        <tr align="right">
            <td colspan="3" style="font-size: 10px;">&nbsp;</td>
        </tr>
        <tr align="right">
            <td colspan="4" style="font-size: 10px;">City West, the City West Logo and all other City West product or service names are<br>trade marks of City West. All Rights Reserved. <unsubscribe>Unsubscribe</unsubscribe>.</td>              
        </tr>
    </table>
</body>

Shaun
  • 1,099
  • 2
  • 13
  • 23
  • 3
    +1 for screenshots, but please also show some HTML code. – Unicron Jul 15 '10 at 14:08
  • 1
    You're using inline styles, which is recommended. I'm curious why you're using a stylesheet at all, since support for Outlook is spotty. Are the styles that are being violated inline or by selector in a global stylesheet? Code would help a LOT! – Steven Jul 15 '10 at 14:11
  • @Unicron - I've added the code for the entire email as requested (although the top bit looks to be displaying a little incorrectly). Thanks for the Vote up. @Steven Xu - Because I'm using Create/Send I can't apply inline style to paragraphs and links, etc. as they don't exist at the point of building the template. – Shaun Jul 15 '10 at 14:15
  • 1
    You clearly already have inline styles (notice all the `style` tags). I infer that you mean that Create/Send doesn't allow you to force inline styles. In this case, you should probably take it up with their support agents. If you're using third party software for this, you're going to have to play within their rules. SO can't really help you since we're dealing with a generator rather than your own source code. – Steven Jul 15 '10 at 14:21
  • No problems Steve Xu, thanks for your advise. – Shaun Jul 15 '10 at 14:55
  • http://stackoverflow.com/questions/18502111/outlook-2010-not-respecting-css-even-font-tags-for-every-text/20461888#20461888 – davidcondrey Jan 07 '14 at 08:26

3 Answers3

2

Your stylesheet is being ignored (which is the expected behaviour in Outlook). Convert those to inline styles and you're done! Last time I checked, Gmail also ignores stylesheets, so you're better off just not using them.

Steven
  • 17,796
  • 13
  • 66
  • 118
  • Thank you for the comment. However, it's also ignoring the inline styles. I've ran a 'design test' using Create/Send but that shows that it's displaying as intended. – Shaun Jul 15 '10 at 14:19
  • You are correct. I apologize for not looking with more discretion. Looking back on my past email newsletters, it seems as though I avoiding all CSS. Between `cellpadding` and `cellspacing` and `` tags, I remember I had quite a bit of success (despite ugly markup). Your target design seems much simpler than stuff I've done in the past and well within the reach of old school HTML. Best of luck! – Steven Jul 15 '10 at 14:45
  • The design was intentionally kept simple to increase the speed of building. As I've said to Jonny (see below) I can't replicate the issue! The client is a large public sector housing association and have some very strange firewall/server setup over there! – Shaun Jul 15 '10 at 14:53
  • @Shaun is it 1000% sure they are using Outlook 2003? Maybe they have style support turned off completely? In which case you'll have no alternative but to ignore them, or to resort to images. (Yuck!) – Unicron Jul 15 '10 at 15:00
  • @Unicorn - it's certainly Outlook 2003 SP3. I've got their IT guys on the case but getting anything done over there can prove difficult. Any other ideas? – Shaun Jul 15 '10 at 15:04
  • @Shaun Yeah, that sort of request will unfortunately go straight to the bottom of the IT pile. I think the best solution for you would be not to worry about the enterprise and just work around their restrictions (in this case no CSS), which at the end of the day isn't prohibitively difficult. – Steven Jul 15 '10 at 15:20
  • @Steven Xu It isn't the CSS that the email client is knocking out as the elements affected are controlled by inline styling! – Shaun Jul 15 '10 at 15:24
2

Remove the styles for the fonts and use the <font> tag. E.g.

<td style="color: #ffffff; font-size: 11px; padding-left: 10px; padding-bottom: 5px;" colspan="4"><$description default=''$></td>

Turn into:

<td style="padding-left: 10px; padding-bottom: 5px;" colspan="4"><font color="#ffffff" size="11px"><$description default=''$></font></td>
Jonny Haynes
  • 3,146
  • 1
  • 27
  • 41
0

I've since found out that the version of Outlook that the client has uses the rendering engine from whatever version of IE is installed. In this instance it's IE6! I've since tested and made amends to the template and all is now good.

Thank you everyone for you help.

Shaun
  • 1,099
  • 2
  • 13
  • 23