Sent by Rowan @ Jetboy on 17 March 2004 18:06
I put weeks of research into this last year, and managed to come up with
multipart-MIME CSS emails that worked flawlessly across all the main
email clients bar Lotus Notes, which has CSS support that's a complete
joke. I keep meaning to post it to the list, but I'll update the
research and post it up to a site in the next couple of weeks. In the
meantime I've pasted my notes below, although some relate to PHP
headers. The short answer is that there is no reason that you can't use
CSS in emails, at least for text layout.
....
Tested in:
Outlook XP, Outlook 97, Outlook Express 5, Eudora 5.2, AOL 8.0, Hotmail,
Yahoo! webmail, Freeserve webmail, BT Openworld webmail
Problems:
Lotus Notes 6 has only partial HTML support, and will render text in its
own colours and line spacings. It does not support background images,
paragraph tags and a whole lot more. However, a well coded email should
at least readable in Notes
PHP code:
$boundary = api_password(16);
$headers = "From: \"".$from_name."\" <".$from_email.">\n"; $headers .=
"To: \"".$to_name."\" <".$to_email.">\n"; $headers .= "Return-Path:
<".$from_email.">\n"; $headers .= "MIME-Version: 1.0\n"; $headers .=
"Content-Type: multipart/alternative; boundary=\"".$boundary."\"\n\n";
$headers .= $body_simple."\n"; $headers .= "--".$boundary."\n"; $headers
..= "Content-Type: text/plain; charset=ISO-8859-1\n"; $headers .=
"Content-Transfer-Encoding: 8bit\n\n"; $headers .= $body_plain."\n";
$headers .= "--".$boundary."\n"; $headers .= "Content-Type: text/HTML;
charset=ISO-8859-1\n"; $headers .= "Content-Transfer-Encoding:
8bit\n\n"; $headers .= $body_html."\n"; $headers .=
"--".$boundary."--\n";
mail('', $subject, '', $headers);
Expected result:
From: "~senders name~" <~senders email~>
To: "~recipients name~" <~recipients email~>
Return-Path: <~recipients email~>
MIME-Version: 1.0
Content-Type: multipart/alternative; boundary="~random string~"
~Content not read by non-MIME compliant clients~
~random string - same as before but prefixed with two hyphens~
Content-Type: text/plain; charset=ISO-8859-1
Content-Transfer-Encoding: 8bit
~Plain text content~
~random string - same as before but prefixed with two hyphens~
Content-Type: text/HTML; charset=ISO-8859-1
Content-Transfer-Encoding: 8bit
~HTML content, including HTML, HEAD and BODY tags~
~random string - same as before but prefixed and suffixed with two
hyphens~
Stuff to know:
.. The should be a line feed at the end of the headers
.. This version used UNIX \n line feeds. If on a Windows box they should
be replaced with Windows line feeds
.. The quotes in the From and To field stop Freeserve and BT Openworld
rejecting the message as malformed
.. Put the style sheet inside comment tags in the <body> section of the
email, thus ensuring Hotmail and BT webmail render the styles.
.. Hotmail and Freeserve webmail likes to chang your CSS to their default
styles. Even if you've specified a font size for <p> tags, don't expect
links to come out the same size unless you've also specified it for <A>
tags. Put font, colour and size information in all declarations. Don't
rely on inheritance
.. Sections of HTML that are too long will be automatically wrapped by
AOL and Freeserve. Avoid by using adding in line feeds every 80
characters or so. In PHP use the Wordwrap function
.. Avoid using background images. They are not supported in BT Openworld
webmail (or Lotus Notes). This holds true for any method of defining
them, either with HTML or the various CSS methods (using inline, per
document or external style sheets)
.. A style sheet within the document will avoid the need to have an
internet connection to view the content of the email as it was intented
.. Styles that effect the <BODY> of the email are likely to be overridden
by webmail clients. It is best to specify page margins within the HTML
.. If a coloured page background is used, when replying to the email the
user will be forced into using that coloured background with their
client's default HTML text colour. This can result in black-on-black
text. The best solution is to use a 100% width table to achieve the
background. This will not affect replies
.. Outlook 97 displays the plain text version of the mail. All other
tested clients displayed the HTML version
.. The PHP mail function expects a subject line. Therefore a header for
the subject has not been used here
.. Outlook specific headers (X headers such as X-Priority) have not been
used as they are optional, and have a tendency to trigger spam filters
.. The header code is attached as a text file to this email
-----Original Message-----
From: [EMAIL-REMOVED]
[EMAIL-REMOVED]] On Behalf Of Amita Guha
Sent: 17 March 2004 18:14
To: 'CSS DISCUSS'
Subject: [css-d] CSS in email newsletters
Hi,
What's the common wisdom regarding CSS in email newsletters? I've been
asked to create an email newsletter template. I just want to use a
couple of styles to manage the type and include the style sheet in the
email, but all the newsletters I've looked at still use font tags. So is
it safe to use style sheets? Obviously I want the newsletter to be
readable in all email readers, but I haven't found much information
online on the best way to code these things. Any help would be much
appreciated.
Thanks,
Amita
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/