CODEWITHSUNDEEP
phphtmlcssemail
Laerte Sousa Neto
Laerte Sousa Neto

Reputation: 160

Using CSS with mail() function in PHP

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.

Upvotes: 3

Views: 7752

Answers (3)

Daniel Perv&#225;n
Daniel Perv&#225;n

Reputation: 1716

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.

Upvotes: 6

James
James

Reputation: 2033

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">

Upvotes: 2

Rasool Ghafari
Rasool Ghafari

Reputation: 4258

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.

Upvotes: 1

Related Questions