php mail function messes my email css

Question

I use a simple email function and it messes all my css.. it puts all the divs one below another instead of in the wrapper div.. is there a way to overcome it?

 function email_template($app_link, $img_link, $app_name){
       $message='<html>
        <head>

    <title>Purchase Successful!</title>
         </head>
            <body>

      <div id="pic" style="position:relative; text-align:center; margin:0px auto;width:320px; height: 480px;">
       <a href="http://1111111111111edapps.com">  
       <div id="logo" style="position:absolute; width:130px; height:35px; z-index:99999;top:5;">
       </div>
       </a>
        <div id="clickHere" style=" position:absolute;width:320px;height:50px;z-index:99999;top:60px;text-align: center;">
            <span id="clickHereText" style="font-size:140%; color:white;"> <a href="'.$app_link.'" style="color:yellow">Click Here</a> to Download<br/>
                 your phonemate app
                 </span>
        </div>

        <div id="appImg" style="position:absolute;width:50px; height:50px;z-index:99999; left:50px;top:210px;">
            <img src="http://1111111111111edapps.com/'.$img_link.'" width="53px" height="53px"/>
        </div>
        <div id="appLabel" style="position:absolute; width:50px; height:10px; z-index:99999; text-align: center; left:50px; top:260px;">
            <span style="color:white; font-size: 50%;">'.$app_name.'</span>
        </div>

        <div id="downloadLink" style="position:absolute; width:320px; height:30px;  z-index:99999; bottom:0px; text-align: center;">
            <a href="'.$app_link.'" style="color:yellow">Download our app on 1111111111111edApps.com</a>
        </div>
       <img src="http://1111111111111edapps.com/email/images/1111111111111edAppEmail.jpg"/>
    </div>
       </body>
   </html>';

  return $message;


 }

The email function works.. but the divs should be inside ..pic div..but they are outside it.. Is there a way to deliver the email and have it being rendered the same as when i test it on a regular page?

Extra note: my php:

     $to = /*TO EMAIL ADDRESS*/"";
 $subject = "Hi!";
$body=email_template('http://1111111111111edapps.com/app_dl.php?app_id=34', $app_pic, $app_name);
echo $body;
 $headers  = 'MIME-Version: 1.0' . "\r\n";
 $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
 if (mail($to, $subject, $body,$headers)) {
   echo("<p>Message successfully sent!</p>");
  } else {
   echo("<p>Message delivery failed...</p>");
  }
  }

Try taking a look here http://www.campaignmonitor.com/css/ to make sure it isn't the recipient email program. In general floats and absolutes dont work well. Tables are frowned upon in many cases for websites, but they are still the way to go for html emails. — scott, May 21 '12 at 15:06
I dont do much mail development but the last time i did the "best practice" seemed to be to put all CSS inline with the `style` attribute as opposed to trying to use style blocks or linked stylesheets... tables were recommended for complex things. — prodigitalson, May 21 '12 at 15:06
I did the same..it doesnt work well...hmmm... inline..fails.. so the solution is to use tables? — Dmitry Makovetskiyd, May 21 '12 at 15:06
NOOOOOO NEVER USE TABLES. Most spam checkers look for table based emails — Cole Tobin, May 21 '12 at 15:10
but as u can see... I did use inline css..and it fails..see update — Dmitry Makovetskiyd, May 21 '12 at 15:10
@ColeJohnson, You couldn't be more wrong. Tables are, sadly, still the only way to really position stuff in e-mail so that it works with most clients. — Brad, May 21 '12 at 15:13
@Brad I code my emails as flat HTML using CSS, then test with email. Also a lot of the spam I get is table based — Cole Tobin, May 21 '12 at 15:14
@ColeJohnson, What does CSS have to do with using tables or not? Of course you can still use CSS, as long as it is inline. — Brad, May 21 '12 at 15:17
@Brad it appears we are not on the same page here. I'm saying, never layout your HTML using tables. I'm not saying he can't use CSS — Cole Tobin, May 21 '12 at 15:19
@ColeJohnson Can you point us to a resource that shows most spam checkers base their algorithms on the presence of tables in HTML emails please? I've used table-based HTML email layouts for many newsletters, so if I need to update my methods I will. However, until I see a definitive document on this I'll stick with using tables for complex stuff in HTML email. — nealio82, May 21 '12 at 15:25
@ColeJohnson, Right... and I'm saying that for HTML e-mails, you're wrong. You have to use tables. Hopefully for not much longer, but if you want to reach a wide audience and have a layout beyond the main container, you have to use tables. — Brad, May 21 '12 at 15:27
@Nealio http://www.freespamfilter.org/forum/viewtopic.php?f=6&t=1191 — Cole Tobin, May 21 '12 at 15:27
@Brad http://www.freespamfilter.org/forum/viewtopic.php?f=6&t=1191 — Cole Tobin, May 21 '12 at 15:27
@ColeJohnson, You might also use some of the resources here: http://stackoverflow.com/q/1018078/362536 That will help show you what works and what doesn't. — Brad, May 21 '12 at 15:29
@ColeJohnson, Read the link you just sent. *"the best way to identify this technique is to use raw body rules to grep for multiple html table elements using 'rowSpan' and having very short text contents"* That doesn't mean you can't use tables. — Brad, May 21 '12 at 15:32
@Brad I'm going to admit defeat :( I'll just say this. It's against my philosophy to use tables, however, go about how you wish — Cole Tobin, May 21 '12 at 15:33

score 3 · Accepted Answer · answered May 21 '12 at 15:20

I ran your code through the W3C markup validator, and it seems that you may need to reconsider your approach here:

<a href="http://1111111111111edapps.com">
<div id="logo" style="position:absolute; width:130px; height:35px; z-index:99999;top:5;">
</div>
</a>

Put an inline element inside the a element (such as a span with display: block; applied). I'd be willing to wager (at this moment in time) that the illegal div is causing you some issues.

Remember, email clients aren't designed to handle HTML errors as well as web browsers do, and while support in some clients is very good, others can be quite far behind (I'm looking at you, Outlook 2007+).

You didn't mention which email clients you'd tested and which were giving you the problems, so if correcting your markup doesn't fix it, give us a little more info.

I tested them on google and yahoo. ur advice doesnt work though — Dmitry Makovetskiyd, May 22 '12 at 05:07
On Google and Yahoo! in which browsers? Browser-based mail applications such as Hotmail, GMail and Yahoo, (not to mention Excite and others) do a pretty good job of stripping out all your styles and re-writing it until it looks nothing like you intended. How does it look in Thunderbird, Apple Mail, Outlook, etc? This article might help you: http://www.sitepoint.com/code-html-email-newsletters/ — nealio82, May 22 '12 at 07:41

php mail function messes my email css

1 Answers1