php - Gmail application displays font size and color wrong -
i have php/html code tables. looks ok in yahoo, gmail etc looks messed weird greenish colors , wrong varying font sizes when opened in gmail application on mobile phone only. thought how can fixed? link below consists of 2 screenshots. 1 on left how looks on email accounts including gmail. , 1 on right how looks on gmail application on iphone. link screenshot
many in advance. code below:
<?php // fixes encoding uf8 function fixencoding($in_str) { $cur_encoding = mb_detect_encoding($in_str) ; if($cur_encoding == "utf-8" && mb_check_encoding($in_str,"utf-8")) homecoming $in_str; else homecoming utf8_encode($in_str); } // fixencoding ?> <?php require_once('class.phpmailer.php'); //include("class.smtp.php"); // optional, gets called within class.phpmailer.php if not loaded $mail = new phpmailer(); $body = '<html><body>'; $body .= '<table rules="all" style="border-color: #fff; font-family: arial; width:595px; height:108px; font-size:115%; background-color:#ffffff;" cellpadding="10">'; $body .= "<tr><td style='text-align: center; text-align: middle; vertical-align: middle; vertical-align: center'> <img style='border: 0px solid ; 'src='http://www.magentastorage.co.uk/mobile/images/emailheader.jpg'></a> </td></tr>"; $body .= '</table>'; $body .= '<table rules="all" style="border-color: #fff; font-family: arial; width:595px; font-size:115%; background-color:#ffffff;" cellpadding="10"; position:relative; left:"20">'; $body .= "<tr><td style= 'padding-left:21px;'>dear " .$_get["name"] ."," . "</td></tr>"; $body .= "<tr><td style= 'padding-left:21px;'>thank visiting our website , contacting storage requirements. below summary of storage quotation: </td></tr>"; $body .= "<tr> <td style='text-align: left; font-family: arial; vertical-align: left;'> <img style='border: 0px solid ; ' src='http://www.magentastorage.co.uk/mobile/images/emailrequirements.png'> </td></tr>"; $body .= '</table>'; $body .= '<table rules="all" style="border-color: #fff; font-family: arial; width:470px; font-size:115%; background-color:#ffffff;" cellpadding="10">'; $body .= "<tr>"; $body .= "<td style= 'padding-left:21px;'>unit size:</td>"; $body .= "<td>"; $body .= $_get["unitsize"]; $body .= "</td>"; $body .= "<td></td>"; $body .= "</tr>"; $body .= '</table>'; $body .= '<table rules="all" style="border-color: #fff; font-family: arial; width:595px; font-size:115%; background-color:#ffffff;" cellpadding="10">'; $body .= "<tr> <td style='text-align: left; font-family: arial; vertical-align: left;'> <img style='border: 0px solid ; ' src='http://www.magentastorage.co.uk/mobile/images/emailquotation.png'> </td></tr>"; $body .= "<tr><td style= 'padding-left:21px;'>" ."weekly rental is" ." " ."£" .$_get["price"] ." " ."</td> </tr>"; $body .= "<tr><td style= 'padding-left:21px;'>this quote includes vat, insurance cover to" ." " ."£" .$_get["insurance"] ." " ."and padlock secure storage unit</td></tr>"; $body .= "<tr><td style= 'padding-left:21px;'>" ."<strong>" ."**4 weeks free storage**" ."</strong>" ."</td>"; $body .= "<tr><td style= 'padding-left:21px;'>simply pay 4 weeks storage when move in , we'll give 4 weeks storage free!</td></tr>"; $body .= "<tr><td style= 'padding-left:21px;'>kind regards, </td></tr>"; $body .= "<tr><td style= 'padding-left:21px;'>store manager </td></tr>"; $body .= "</table>"; $body .= "</body></html>";
i'm not knowledgeable plenty php give tips, see quite few things wrong static html bits.
<td style='text-align: center; text-align: middle; vertical-align: middle; vertical-align: center'> here, you've set vertical align twice. vertical-align: center isn't valid , should removed. add together min-width:595px style declaration.
<table rules="all" style="border-color: #fff; font-family: arial; width:595px; font-size:115%; background-color:#ffffff;" cellpadding="10"; position:relative; left:"20"> instead of border-color: #fff, create entire border. border: 3px solid #ffffff. have position:relative; left:"20" outside of style declaration, should moved. also, you'll need add together unit left value , remove semi-colon in cellpadding="10";.
<td style='text-align: left; font-family: arial; vertical-align: left;'> you cannot set vertical align left.
also, when working in email, best utilize full, 6-character hex code. border: 0px solid can replaced border: 0. suggest using absolute font sizes, rather relative percentages.
once again, don't know how solid php is, seeing how there's quite few mistakes in html/css, suggest getting sorted out , email may behave bit nicer.
php css table gmail html-email
No comments:
Post a Comment