Using CSS with mail() function in PHP

Question

I'm having a problem with css and php mail function, and I can't figure out why parts of the styling sheet is not working.

This is my php function which sends the email to the user:

    <?php
require 'dbconnection.php';

//Testing variables
$name = "laerte";
$email = "[email protected]";
$title = "Some Project";
$desc = " Some description";

//adds project to MYSQL database
//The function returns uniqid generated
$id = addProject($title,$desc,$name);

$subject = "Project: ".$title;
$header  = 'MIME-Version: 1.0' . "\r\n";
$header .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
$header .= "From: pixelgraphy.net";
$message = "<html>
    <head>
    <style>
        body
        {
            width: 700px;
            height: auto;
        }
        h1
        {
            background-color: blue;
            color:white;
            margin-top: 5px;
            margin-bottom: 5px;
            text-align:center;
        }
        #message
        {
            width: 500px;
            height: auto;
            margin-bottom: 5px;
            margin-left: auto;
            margin-right: auto;
        }
        #sign
        {
            background-color: blue;
            color: white;
            margin-top: 5px;
            margin-bottom: 5px;
            text-align: center;
        }
    </style>
    </head>
    <body>
        <h1>Request For Feedback</h1>
        <div id = 'message'>

            <p>".$name."  , thank you for submting your idea  The project <b> ".  
            $title." </b> has been added to RFF's view list </p>  
            <a href ='www.pixelgraphy.net/assignment8/getcomments.php?id=".$id."   
            '>Click here</a> to view RFF's list of projects 
        </div>
        <div id = 'sign'> Sinceraly, Anthony Paveglio & Laerte Sousa </div> 
    </body>
                </html>";

    //sends the email           
    mail($email,$subject,$message,$header);

    ?>

if i echo $message to the page, everything is fine:

no longer available.

but the message sent to my email comes like this:

no longer available.

For some reason all the styling after the title does not work, and i can't figure out why. any help or tips will be greatly appreciated.

Use inline CSS. Most Email services will tear your stylesheet apart, literally. — Funk Forty Niner
– Funk Forty Niner, Commented Oct 29, 2013 at 16:48
Inline everything. There are some tools to do this for your HTML template automatically. premailer.dialect.ca and inlinestyler.torchboxapps.com are some examples. — Charlie Schliesser
– Charlie Schliesser, Commented Oct 29, 2013 at 16:49
Use regular CSS to build it (as it's easier), then when you're happy with the output use a tool to convert the CSS into inline styles as mentioned above. Almost no extra overhead dev time. — Novocaine
– Novocaine, Commented Oct 29, 2013 at 16:54

Daniel Perván · Accepted Answer · 2013-10-29 17:09:14Z

6

You need to forget everything you know about regular web design if you want to create HTML mails. Most webmail services, including Gmail (which you seem to be using) applies rigorous filtering on all HTML and will blatantly strip away everything if you do anything they might not approve of.

First of all, last time I checked, Gmail doesn't support style-tags at all, in fact, merely including a head or body tag may break everything. The best approach is to not use any CSS at all and rely on the good old table layouts of the nineties. If you really have to use CSS, you will need to inline it.

Additionally, you should create some outlook.com, yahoo.com and icloud.com accounts to make sure that you at least cover the most common webmail services. In my experience, iCloud is the easiest of them to code for since it merely displays the mail inside an iframe with very little, if any, formatting at all.

Lastly, while it's impossible to be sure without actually testing it, I've noticed that Gmail sometime dislike text with color:white as well as a-tags with color:black. Setting the colour to something like #EFEFEF or #010101, respectively, may solve that though.

answered Oct 29, 2013 at 17:09

Daniel Perván

1,71613 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tim Taurit Over a year ago

this is right, and Gmail itself has some more unintuitive limitations: ignoring CSS properties like "display" or "box-shadow", not allowing web fonts etc. See litmus.com/blog/understanding-gmail-and-css-part-1 for a good start, I managed to display my template the way I wanted using this knowledge + some email inliner tool

James Donnelly · Accepted Answer · 2013-10-29 16:52:05Z

2

Change your styling from ID to CLASS. The IDs are sometimes changed.

For example:

    .message
    {
        width: 500px;
        height: auto;
        margin-bottom: 5px;
        margin-left: auto;
        margin-right: auto;
    }
    .sign
    {
        background-color: blue;
        color: white;
        margin-top: 5px;
        margin-bottom: 5px;
        text-align: center;
    }

And then you obviously change

<div id="message">

to

<div class="message">

edited Oct 29, 2013 at 16:52

James Donnelly

129k35 gold badges215 silver badges224 bronze badges

answered Oct 29, 2013 at 16:46

James

2,0533 gold badges19 silver badges31 bronze badges

6 Comments

Rasool Ghafari Over a year ago

I think the inline styling is more better in sending emails, also better than ID and Class. because some of the mail servers, change the value of element attribiutes.

Laerte Sousa Neto Over a year ago

Thank you for your suggestion, but the problem still persisted.

Funk Forty Niner Over a year ago

"but the problem still persisted." - Read this

Laerte Sousa Neto Over a year ago

I'm going to try doing it inline.

Funk Forty Niner Over a year ago

@LaerteSousaNeto You will have better results doing it that way, even though it's more work, it's well worth the effort. ;-)

|

Rasool Ghafari · Accepted Answer · 2013-10-29 16:49:45Z

1

I think this is more better and useful way:

<div id="message" style="background-color: blue !important;color: white !important;">

As you know, !important ignore the another style rules.

answered Oct 29, 2013 at 16:49

Rasool Ghafari

4,3189 gold badges50 silver badges78 bronze badges

Collectives™ on Stack Overflow

Using CSS with mail() function in PHP

3 Answers 3

1 Comment

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related