Why does my email look this why in google?

Bruce Gust
Bruce Gust used Ask the Experts™
on
Attached is a screen shot of the email that I'm sending out. As you can see, everything is displaced, yet when I run the code on my browser, it looks fine. The code is below:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Texaco Country Music Showdown</title>
<link rel="stylesheet" type="text/css"href="http://www.countryshowdown.com/email/style.css">
<MAP NAME="header_map">
<AREA
   HREF="http://www.countryshowdown.com/Texaco/index.php" ALT="Home" TITLE="Home"
   SHAPE=RECT COORDS="25,131,71,147">
   <AREA
   HREF="http://www.countryshowdown.com/Texaco/TVStations.php" ALT="TV Stations" TITLE="TV Stations"
   SHAPE=RECT COORDS="115,132,175,144">
    <AREA
   HREF="http://www.countryshowdown.com/Texaco/ContestLocations.php" ALT="Radio Stations" TITLE="Radio Stations"
   SHAPE=RECT COORDS="224,135,300,145">
    <AREA
   HREF="http://www.countryshowdown.com/Texaco/ContestantList.php" ALT="View Contestants" TITLE="View Contestants"
   SHAPE=RECT COORDS="367,131,462,147">
        <AREA
   HREF="http://www.countryshowdown.com/Texaco/Contact.php" target="_blank" ALT="Contact" TITLE="Contact"
   SHAPE=RECT COORDS="520,134,566,144">
      </map>
</head>

<body background="http://www.countryshowdown.com/images/BSPpreStephan_01.gif"  LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>

<table width="100%" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" align="center" valign="top">&nbsp;<BR>
&nbsp;<BR>&nbsp;<BR>
      <table height 0% width="600" align="center" cellpadding="0" cellspacing="0" border="0">
      <tr>
      <td background="http://www.countryshowdown.com/images/PencilLine.jpg" width="2">&nbsp;<BR>
      </td>
      <td bgcolor="white" valign="top">
      <IMG SRC="http://www.countryshowdown.com/images/email_header.jpg" width="600" border="0" USEMAP="#header_map">
      </td>
      <td background="http://www.countryshowdown.com/images/PencilLine.jpg" width="2">&nbsp;<BR>
      </td>
      </tr>
      <tr>
      <td background="http://www.countryshowdown.com/images/PencilLine.jpg" width="2">&nbsp;<BR>
      </td>

      <!- main content ->
      <td valign="top" bgcolor="white" align="center">
            <table cellspacing="0" cellpadding="0" valign="top" border="0">
            <td valign="top" align="center">
                  <table border="0" width="590" cellspacing="0" cellpadding="0" align="center">
                  <tr>
                  <td background="http://www.countryshowdown.com/images/spacer.gif" height="300" width="590" valign="top">
                  
                  <!- content ->
                  
                  &nbsp;<BR>&nbsp;<BR>Hello, $the_first_name !<P>To validate your email and to ensure that your votes count, click on the link below.";
$message .= "<P><A HREF=\"http://www.countryshowdown.com/Texaco/songwriting_voter_validation.php?email=$voter_email&chk=$the_digest\" target=\"_blank\">http://www.countryshowdown.com/Texaco/songwriting_voter_validation.php?email=$voter_email&chk=$the_digest</a><P>If you have any questions, you can contact your Showdown staff by clicking <A HREF=\"http://www.countryshowdown.com/Texaco/Contact.php\" target=\"_blank\">

                  </td>
                  </tr>
                  </table>
        </td>
            </tr>
            </table>

            <!- your copy ends here - >

      

            <!- end main content ->
      </td>
      <td background="http://www.countryshowdown.com/images/PencilLine.jpg" width="2">&nbsp;<BR>
      </td>
      </tr>
      <tr>
      <td background="http://www.countryshowdown.com/images/PencilLine.jpg" width="2">&nbsp;<BR>
      </td>
      <td height="70" background="http://www.countryshowdown.com/email/new_footer.jpg">
      &nbsp;<BR>
      </td>
      <td background="http://www.countryshowdown.com/images/PencilLine.jpg" width="2">&nbsp;<BR>
      </td>
      </tr>
      </table>
</td>
</tr>
<tr><td colspan="3" align="center">&nbsp;<BR>Special Promotions, Inc | 63 Music Square East | Nashville, TN 37203 | (p) 615.321.5130 | (w) <A HREF="http://www.countryshowdown.com" target="_blank">countryshowdown.com</a>&nbsp;<BR>&nbsp;<BR></td></tr>

</table>
</body>
</html>


What am I missing? Thoughts?


 screen shot of messed up email in google
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Sandeep KothariProject Lead

Commented:
are you using text/html as content type when sending email ?
Bruce GustPHP Developer

Author

Commented:
Yes - here are my headers:

$headers = 'MIME-Version: 1.0'. PHP_EOL;
$headers .= 'Content-type: text/html; charset=iso-8859-1'. PHP_EOL;
$headers .= 'FROM: contest@countryshowdown.com'. PHP_EOL;

The whole PHP code looks like this:

$subject_line = "voter validation";
$from_email = "contest@countryshowdown.com";
$the_first_name = stripslashes($_POST['voter_first_name']);

$headers = 'MIME-Version: 1.0'. PHP_EOL;
$headers .= 'Content-type: text/html; charset=iso-8859-1'. PHP_EOL;
$headers .= 'FROM: contest@countryshowdown.com'. PHP_EOL;
$to = $voter_email;
$subject = $subject_line;
$message .= file_get_contents('email_header.php');
$message .= "&nbsp;<BR>&nbsp;<BR>Hello, $the_first_name !<P>To validate your email and to ensure that your votes count, click on the link below.";
$message .= "<P><A HREF=\"http://www.countryshowdown.com/Texaco/songwriting_voter_validation.php?email=$voter_email&chk=$the_digest\" target=\"_blank\">http://www.countryshowdown.com/Texaco/songwriting_voter_validation.php?email=$voter_email&chk=$the_digest</a><P>If you have any questions, you can contact your Showdown staff by clicking <A HREF=\"http://www.countryshowdown.com/Texaco/Contact.php\" target=\"_blank\">here</a>.<P>Thanks!";
$message .= file_get_contents('email_footer.php');
mail($to, $subject , $message, $headers);
Sandeep KothariProject Lead
Commented:
hmmm... try sending mail to other mail service providers ... say @yahoo.com .. and check if the html breaks there as well ?
I suggest you start with much simpler table examples and try to get your graphics allignments right and then gradually move more complex to get a better fix on what google mail is having problems with.

From just quickly looking at your code, the background images in your table seems to be the culprit. Even MS Outlook does not like to have images as backgrounds of tables/tr/td's.

You can maybe even play around with using CSS and table-less designs instead?

Most Valuable Expert 2011
Top Expert 2016
Commented:
Agree with psimation -- There are no two email rendering programs that handle HTML and CSS the same way, and you're completely at the mercy of the client email readers.  None of them stand up to validation.

I probably would stick to the simplest, oldest HTML tags and that would mean I would keep the table design because the more CSS you use, the less likely the email readers will be able to understand the styling.

Best of luck with it, ~Ray
hi, sadly this is true, it's too bad the email programs can't just all use the same embedded browser to display html mail, it gets really bad on some older corporate email programs like old versions of outlook, and lotus notes has to be the worst in my opinion.

Something you could do is sign up for a free mailchimp account, use one of their templates and see how they are doing it and then build yours only using those tags... also with your free mailchimp account I think you can send up to 500 emails a month for free (not sure how big your list is...) so if your list is small enough you could just use that. Also I think mailchimp has at least some preview testing you can do, but there is also http://litmus.com/ which that is all they do, so you can see what your message will look like in all types of email clients.

good luck, email newsletters are a pain.
Most Valuable Expert 2011
Top Expert 2016

Commented:
Afterthought: I have had good success with http://www.constantcontact.com/index.jsp

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial