Issue with HTML displayed in email sent from PHP

Question

I'm using the Pear PHP mail library to send HTML emails (mainly to hotmail). I'm having issues with the CSS functioning correctly. At the moment when the message is received the CSS is in the body of the message and the styles are not applied.

The code is as follows:

$message = "<!DOCTYPE html>

<html>
<head>
<style>
        body {
    font:12px/1.4em Verdana, sans-serif;
    color:#333;
    background-color:#fff;
    width:700px;
    margin:50px auto;
    padding:0;
}

a {
    color:#326EA1;
    text-decoration:underline;
    padding:0 1px;
}

a:hover {
    background-color:#333;
    color:#fff;
    text-decoration:none;
}

div.header {
    border-bottom:1px solid #999;
}

div.item {
    padding:5px 0;
    border-bottom:1px solid #999;
}  
</style>
</head>
    </body>";

// PARSE    
    $limit = 9;
    for($x=0;$x<$limit;$x++) {
        $title = str_replace(' & ', ' &amp; ', $news[$x]['title']);
        $link = $news[$x]['link'];
        $description = $news[$x]['desc'];
        $date = date('d-m-Y', strtotime($news[$x]['date']));
        $message .= '<p><strong><a href="'.$link.'" title="'.$title.'">'.$title.'</a></strong><br />';
        $message .= '<p>'.$description.'</p>';
    }

    $message .="</body> </html>";       

foreach($email_add_arr as $name => $email)
{

$crlf = "\n";
$from = "";
$to = "$name <$email>";
$subject = "News - $date";
$host = "ssl://smtp.gmail.com";
$port = "465";
$username = "";
$password = "";

// Creating the Mime message
$mime = new Mail_mime();

// Setting the body of the email
$mime->setHTMLBody($message);
$body = $mime->get();   

$headers = array (
'From' => $from,
'To' => $to,
'Subject' => $subject,
'MIME-Version: 1.0',
                    'Content-Type: text/html; charset=ISO-8859-1');
$smtp = Mail::factory('smtp',
                    array ('host' => $host,
                     'port' => $port,
                     'auth' => true,
                     'username' => $username,
                     'password' => $password
                     ));

$mail = $smtp->send($to, $headers, $message);

if (PEAR::isError($mail)) {
    echo("<p>" . $mail->getMessage() . "</p>");
} else {
    echo("<p>Message successfully sent!</p>");
    }
}

Anyone have any experience with this?

Thanks!

This is the ONE time that you'll see inline styles being advocated. Email services are a lot like internet browsers. They all handle defaults differently. With browsers being a lot more friendly than email services. — hungerstar, Jul 25 '13 at 14:49

score 7 · Answer 1 · answered Jul 25 '13 at 14:42

7

You can only apply inline styles in the mails.

For example:

<div style="float:left; padding: 10px;">demo</div>

answered Jul 25 '13 at 14:42

Alvaro

40,778
30
164
336

1

one small caveat - some mail clients will support a style tag but in order to be cross compatible you should use inline. – Brad Jul 25 '13 at 14:47
Yeah that's great thanks however when the email is sent the email body looks like this:
Good point.

– Daniel Pilch Jul 25 '13 at 15:35
Your message was cut. Like how? – Alvaro Jul 25 '13 at 15:36
@DanielPilch that is another question. I answered your first question. I would recommend you to open another question for it. – Alvaro Sep 25 '13 at 09:06

score 0 · Answer 2 · answered Jul 25 '13 at 14:45

0

You can only use inline CSS. Try this tool http://beaker.mailchimp.com/inline-css

answered Jul 25 '13 at 14:45

tungsten_carbide

525
5
18

score 0 · Answer 3 · answered Jul 25 '13 at 14:50

@alvaro's answer is correct. In addition though, a good resource for what exactly is supported in each client is this http://www.campaignmonitor.com/css/

It addresses

selectors
text & fonts
color & background
box model
lists
tables

for all relevant mail clients

Issue with HTML displayed in email sent from PHP

3 Answers3