PHP Email showing incorrectly in GMail and Outlook

Question

When I try to send an HTML email using the PHPMailer library, the received email shows incorrectly.

I have already tried with different mail clients (Gmail and Outlook), but they look very the same.

This is my current code

require_once 'includes/mail-denied.php'; // Here is specified the $message variable, containing the HTML and CSS (https://i.imgur.com/UG1B34V.png)

$keys = array('{{ server_name }}', '{{ player_name }}', '{{ reason_area }}', '{{ date }}');
$_POST['description'] = nl2br($_POST['description']);
$replace = array($servernam, $name, $_POST['description'], date("Y"));

$message = str_replace($keys, $replace, $message);

$mail_manager = new PHPMailer(true);
try {
    $mail_manager->SMTPDebug = 2;

    $mail_manager->setFrom('noreply@'.$_SERVER['HTTP_HOST'], $servernam);
    $mail_manager->addAddress($mail);
    $mail_manager->addReplyTo('noreply@'.$_SERVER['HTTP_HOST'], 'Do not reply');

    $mail_manager->isHTML(true);
    $mail_manager->Subject = "Staff Application System - ".$servernam;
    $mail_manager->Body    = $message;
    $mail_manager->AltBody = 'Your application has been declined.';

    $mail_manager->send();
} catch (Exception $e) {
    echo "Message could not be sent. Mailer Error: {$mail_manager->ErrorInfo}";

I do receive the email, but part of the HTML looks just messed up.

Here's the HTML code:

<?php
$message = '
<div style="width: 500px;
    height: 110px;
    position: fixed;
    background-color: #ff9999;
    border-bottom: 1px solid #ff8080;
    display: block;
    border-top-left-radius: .5em;
    border-top-right-radius: .5em;
    color: #FFF;
    text-align: center;
    font-family: \'Product Sans\', Arial, sans-serif;">
    <h2>Staff System Application</h2>
    <h3>{{ server_name }}</h3>
</div>

<div style="width: 500px;
    height: 600px;
    background-color: #f2f2f2;
    display: block;
    padding-top: -10px;
    z-index: 999;
    border-radius: .5em;
    font-family: \'Product Sans\', Arial, sans-serif;">
    <div style="padding: 120px 15px 5px 15px;
        color: #797979;
        font-family: \'Product Sans\', Arial, sans-serif;">
        <p>Dear {{ player_name }}...</p>

        <p>After carefully considering your staff application the head staff have acquired a verdict.</p>

        <p>We regret to inform you that your application has been:</p>

        <p style="color: #C60000; font-size: 80px; text-align: center; margin-top: 10px;">DENIED</p>

        <div style="margin-top: -55px; font-size: 15px;">
            <p>You have been denied for the next reason(s):</p>
            {{ reason_area }}
        </div>
        <br>
        <br>
        <p style="text-align: center; padding-bottom: -15px;">THIS IS AN AUTOMATED MESSAGE, DO NOT REPLY.</p>
    </div>
</div>

<div style="margin-top: -10px;
    width: 500px;
    height: 90px;
    position: fixed;
    display: block;
    background-color: #595959;
    border-bottom-left-radius: .5em;
    border-bottom-right-radius: .5em;
    text-align: center;
    font-family: \'Product Sans\', Arial, sans-serif;
    color: #edeff2;">
    <p style="font-size: 20px;">&copy; {{ server_name }} - {{ date }}</p>
    <p style="font-size: 9px;">&copy; {{ date }} Carinae Studios. All rights reserved.</p>
</div>';
?>

This is how it should look like:

And this is how it looks when I receive the email:

I'm pretty new with HTML inside emails, I have no idea how this could be fixed.

Answer 1

Here are a few suggestions for what I've gathered from your information:
Like I said in the comments, use tables as much as possible.

Avoid classes and use inline styles. Add the font style to your td's as well as any html element inside of your td. Use the font or span tag instead of the p tag.

An example:

<td style="font-family:Arial; font-size:18px;">
    <font style="font-family:Arial; font-size: 18px">Text here</font>
</td>

Don't use paddings and margins and floats, use heights and withds to create spacings. You can even use transparent images to create spacings:

<tr>
    <td width="10" style="10px"></td> <!-- vertical spacing to create left/right margins -->
    <td><img src="full-image.jpg" alt="your visible image here"></td>
    <td width="10" style="10px"></td> <!-- vertical spacing to create left/right margins -->
</tr>
<!-- horizontal spacing to create top/bottom margins START -->
<tr height="50" style="height:50px;">
    <td height="50" width="10" style="height: 50; width: 10px"></td>
    <td height="50"><img height="50" style="height: 50px;" src="transparent.png" alt="this is a transparent image"></td>
    <td height="50" width="10" style="height: 50; width: 10px"></td>
</tr>
<!-- horizontal spacing to create top/bottom margins END -->
<tr>
    <td width="10" style="10px"></td> <!-- vertical spacing to create left/right margins -->
    <td><img src="full-image.jpg" alt="your visible image here"></td>
    <td width="10" style="10px"></td> <!-- vertical spacing to create left/right margins -->
</tr>

Other tips:

• Avoid using css border-radius, use images instead
• Use websafe fonts, use google to find which ones are websafe
• Reference your images with CDN's

Litmus has free templates that you can use to base your code off of, they are guaranteed to work within any client/device.

I hope this helps. Let me know if you still have questions.