asked on

PHPMailer - Sending Full HTML Page with CSS

The below does not work, is it even possible?

Everything works fine, except the Graphics do not show up correctly, and the CSS doesn't seem to be applied.

It should look like this:

http://www.traypml.com/nahb/email.html

<?php
require_once 'phpmailer/class.phpmailer.php';

$sql = "SELECT * FROM users WHERE id=1";
$rs = mysql_query($sql);
while ($row = mysql_fetch_array($rs)){

$mail = new PHPMailer();
$mail->From = "ecommerce@domain.com";
$mail->FromName = "Ecommerce";
$mail->Subject = "Invitation - ". $row['fname'] . " " . $row['lname'] . "";
$msg = '<html>
<head>
      <title>Invitation Email</title>
      <style>
            body {
                  background-color: #999;
            }

            #content {
                  width: 800px;
                  height: 600px;
                  background: url("http://www.traypml.com/nahb/images/invite_bg.jpg");
                  border: 1px solid black;
                  margin: 0 auto;
            }
            #dateTime {
                  width: 800px;
                  text-align: center;
                  font: 35px Impact;
                  position: relative;
                  top: 130px;
                  line-height: 50px;
                  text-transform: uppercase;
            }
            #bullets {
                  position: relative;
                  left: 320px;
                  top: 180px;
                  width: 400px;
                  height: 90px;
                  text-align: center;
                  font: 18px Helvetica, Arial, sans-serif;
                  letter-spacing: 1px;
            }
            #iPhone {
                  color: white;
                  text-align: center;
                  position: relative;
                  left: 100px;
                  top: 85px;
                  width: 200px;
                  font: 20px Helvetica, Arial, sans-serif;
                  line-height: 35px;
            }
            #service {
                  font: 15px Helvetica, Arial, sans-serif;
                  font-style: italic;
                  position: relative;
                  left: 100px;
                  top: 115px;
            }
            #button {
                  font: bold 14px Helvetica, Arial, sans-serif;
                  position: relative;
                  left: 500px;
                  text-align: center;
                  width: 150px;
                  top: 30px;
            }
            #button a {
                  color: black;
                  text-decoration: none;
            }
            #button a:hover {
                  color: red;
            }
      </style>
</head>
<body style="background-color: #999;">
      <div id="content">
             
            <div id="dateTime">
                  Tuesday March 18, 2008<br/>
                  10:00AM - 12:00PM<br/>
                  ABC Conference Room<br/>
            </div>
            <div id="bullets">
                  • Meet your Traypml team   • Food & Drinks<br/>
                  • Prizes   • Learn about how we can help<br/>
                  you with your printing & mailing needs
            </div>
            <div id="iPhone">
                  RSVP<br/>To Attend &<br/>Register to<br/>WIN A<br/>16GB iPhone*!!
            </div>
            <div id="service">
                  * Service Plan Not Included<br/>You must be present to claim your prize
            </div>
            <div id="button">
                  <a href="http://www.traypml.com/nahb/index.php?id='.$row['id'].'" target="_blank">Click Here to<br/>RSVP & Register</a>
            </div>
      </div>
</body>
</html>';

$mail->Body = $msg;
$mail->IsHTML(true);
$custEmail = $row['email'];
$mail->AddAddress($custEmail);
$mail->Send();
}
?>

ASKER CERTIFIED SOLUTION

Vel Eous

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

tjstalcup

ASKER

Okay, I did that, but it still comes over like this:

Tuesday March 18, 2008 10:00AM - 12:00PM ABC Conference Room
Meet your Traypml team Food Drinks Prizes Learn about how we can help you with your printing mailing needs
RSVPTo Attend Register toWIN A16GB iPhone*!!
* Service Plan Not IncludedYou must be present to claim your prize
Click Here toRSVP Register <http://www.traypml.com/nahb/index.php?id=1>

Instead of this:

http://www.traypml.com/nahb/email.html

Vel Eous

I don't think its has anything to do with the $msg variable now. I created an echo of the code here:

http://pxlfreak.com/dev/EE/Q_20967342/

As you can see it looks identical to the page in your example in the above post. The rest of your code seems fine, only thing I can think of is that your phpmailer script is parsing it funny.

tjstalcup

ASKER

Does PHPMailer not allow for a full html page? along with style information, all examples i have seen are just:

$msg = "<h1 style='color: red;'>Hi There, <br/><b>Click Here</b></h1>";

Open in new window

Vel Eous

PHP mail allows for HTML messages yes. Try the following just out of curiosity

$to = "ecommerce@domain.com";
$subject = "ecommerce@domain.com";
$headers = "From: ecommerce@domain.com;" . "\r\n" . "Reply-To: me@domain.com" . "\r\n" . "X-Mailer: PHP/" . phpversion();
 
$msg = "<html>
<head>
      <title>Invitation Email</title>
      <style>
            body {
                  background-color: #999;
            }
            
            #content {
                  width: 800px;
                  height: 600px;
                  background: url('http://www.traypml.com/nahb/images/invite_bg.jpg');
                  border: 1px solid black;
                  margin: 0 auto;
            }
            #dateTime {
                  width: 800px;
                  text-align: center;
                  font: 35px Impact;
                  position: relative;
                  top: 130px;
                  line-height: 50px;
                  text-transform: uppercase;
            }
            #bullets {
                  position: relative;
                  left: 320px;
                  top: 180px;
                  width: 400px;
                  height: 90px;
                  text-align: center;
                  font: 18px Helvetica, Arial, sans-serif;
                  letter-spacing: 1px;
            }
            #iPhone {
                  color: white;
                  text-align: center;
                  position: relative;
                  left: 100px;
                  top: 85px;
                  width: 200px;
                  font: 20px Helvetica, Arial, sans-serif;
                  line-height: 35px;
            }
            #service {
                  font: 15px Helvetica, Arial, sans-serif;
                  font-style: italic;
                  position: relative;
                  left: 100px;
                  top: 115px;
            }
            #button {
                  font: bold 14px Helvetica, Arial, sans-serif;
                  position: relative;
                  left: 500px;
                  text-align: center;
                  width: 150px;
                  top: 30px;
            }
            #button a {
                  color: black;
                  text-decoration: none;
            }
            #button a:hover {
                  color: red;
            }
      </style>
</head>
<body style='background-color: #999;'>
      <div id='content'>
            &nbsp;
            <div id='dateTime'>
                  Tuesday March 18, 2008<br/>
                  10:00AM - 12:00PM<br/>
                  ABC Conference Room<br/>
            </div>
            <div id='bullets'>
                  &bull; Meet your Traypml team &nbsp; &bull; Food & Drinks<br/>
                  &bull; Prizes &nbsp; &bull; Learn about how we can help<br/>
                  you with your printing & mailing needs
            </div>
            <div id='iPhone'>
                  RSVP<br/>To Attend &<br/>Register to<br/>WIN A<br/>16GB iPhone*!!
            </div>
            <div id='service'>
                  * Service Plan Not Included<br/>You must be present to claim your prize
            </div>
            <div id='button'>
                  <a href='http://www.traypml.com/nahb/index.php?id=$row['id']' target='_blank'>Click Here to<br/>RSVP & Register</a>
            </div>
      </div>
</body>
</html>";
 
mail($to, $subject, $msg, $headers);

Open in new window

tjstalcup

ASKER

My current code works fine on PCs and Webmail on a mac, but not in entourage.

However, on the PCs and Webmail it does not show the background image.

And when i view source, the line of code in the CSS that places the background image has disappeared.

Why?

tjstalcup

ASKER

Awesome, got it to work, guess how?

I used Tables for layout instead of CSS, for some reason that made it work in Outlook 07, 03, Entourage, webmail, everything! There are always exceptions to the rules huh?