tags:

views:

35

answers:

3
+3  Q: 

Outlook 2003 stripping out text decoration - HTML Email

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

OutLook 2003

alt text

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

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>

+2  A: 

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 Xu  2010-07-15 14:17:53
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  2010-07-15 14:19:53
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 `<font>` 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 Xu  2010-07-15 14:45:01
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  2010-07-15 14:53:34
@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  2010-07-15 15:00:33
@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  2010-07-15 15:04:52
@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 Xu  2010-07-15 15:20:15
@Steven Xu It isn't the CSS that the email client is knocking out as the elements affected are controlled by inline styling!
Shaun  2010-07-15 15:24:03
+2  A: 

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  2010-07-15 14:18:56
Thanks Jonny but that hasn't resolved it.
Shaun  2010-07-15 14:32:20
Even adding the `<font>` tag inside the `<a>`? And removing the styles from the head?
Jonny Haynes  2010-07-15 14:41:32
I didn't remove the styling from the top but it wasn't relied upon. I'm finding it really hard to replicate the issue to be honest!
Shaun  2010-07-15 14:44:04
A: 

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  2010-07-26 08:04:29

related questions

Autosizing Textarea
Regular expression for parsing links from a webpage?
What are good tools for creating compiled HTML help files (.chm)?
Looking for WYSIWYG HTML editor
Any reason not to start using the HTML 5 doctype?
HTML comments break down
HTML Comments Markup
Setting a div's height in HTML with CSS
Wrapping lists into columns
Is a "Confirm Email" input good practice when user changes email address?
<XMP> Tag
HTML version choice
Options for HTML scraping?
How do you disable browser Autocomplete on web form field / input tag?
How do I make a checkbox toggle from clicking on the text label as well?
Html CSS Editor
Wordpress theme development offline tools
How do I give my web sites an icon for iPhone?
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
How do I print an HTML document from a web service?
Multiple submit buttons on a HTML form
How can I determine a web user's time zone?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?