Login

06-01-2014, 12:32 PM

[eluser]Neoraj3.0[/eluser]
This template with CSS works fine locally when I do a email from localhost using gmail's smtp but on the live site the email when generated prints out the CSS code instead of rendering it.

// my configs
$email_config = Array(
'protocol' => 'smtp',
'smtp_host' => 'smtp.gmail.com',
'smtp_port' => '465',
'smtp_crypto' => 'ssl',
'smtp_timeout' => '7',
'smtp_user' => '[email protected]',
'smtp_pass' => 'my password',
'charset' => 'iso-8859-1', //or 'charset' => 'iso-8859-1'
'mailtype' => 'html',
'wordwrap' => TRUE,
'starttls' => true,
'newline' => "\r\n"
);

my css:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html >
<head>
<meta http-equiv="Content-Type" c charset=utf-8" />
<meta name="viewport" c>
<style>
/**********************************************
* Ink v1.0.5 - Copyright 2013 ZURB Inc *
**********************************************/

/* Client-specific Styles & Reset */

#outlook a {
padding:0;
}

body{
width:100% !important;
min-width: 100%;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
margin:0;
padding:0;
}

.ExternalClass {
width:100%;
}

.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}

#backgroundTable {
margin:0;
padding:0;
width:100% !important;
line-height: 100% !important;
}

img {
outline:none;
text-decoration:none;
-ms-interpolation-mode: bicubic;
width: auto;
max-width: 100%;
float: left;
clear: both;
display: block;
}

center {
width: 100%;
min-width: 580px;
}

a img {
border: none;
}

p {
margin: 0 0 0 10px;
}

table {
border-spacing: 0;
border-collapse: collapse;
}

td {
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
border-collapse: collapse !important;
}

table, tr, td {
padding: 0;
vertical-align: top;
text-align: left;
}

hr {
color: #d9d9d9;
background-color: #d9d9d9;
height: 1px;
border: none;
}

/* Responsive Grid */

table.body {
height: 100%;
width: 100%;
}

table.container {
width: 580px;
margin: 0 auto;
text-align: inherit;
}

table.row {
padding: 0px;
width: 100%;
position: relative;
}

table.container table.row {
display: block;
}

td.wrapper {
padding: 10px 20px 0px 0px;
position: relative;
}

table.columns,
table.column {
margin: 0 auto;
}

table.columns td,
table.column td {
padding: 0px 0px 10px;
}

table.columns td.sub-columns,
table.column td.sub-columns,
table.columns td.sub-column,
table.column td.sub-column {
padding-right: 10px;
}

td.sub-column, td.sub-columns {
min-width: 0px;
}

table.row td.last,
table.container td.last {
padding-right: 0px;
}

table.one { width: 30px; }
table.two { width: 80px; }
table.three { width: 130px; }
table.four { width: 180px; }
table.five { width: 230px; }
table.six { width: 280px; }
table.seven { width: 330px; }
table.eight { width: 380px; }
table.nine { width: 430px; }
table.ten { width: 480px; }
table.eleven { width: 530px; }
table.twelve { width: 580px; }

table.one center { min-width: 30px; }
table.two center { min-width: 80px; }
table.three center { min-width: 130px; }
table.four center { min-width: 180px; }
table.five center { min-width: 230px; }
table.six center { min-width: 280px; }
table.seven center { min-width: 330px; }
table.eight center { min-width: 380px; }
table.nine center { min-width: 430px; }
table.ten center { min-width: 480px; }
table.eleven center { min-width: 530px; }
table.twelve center { min-width: 580px; }

table.one .panel center { min-width: 10px; }
table.two .panel center { min-width: 60px; }
table.three .panel center { min-width: 110px; }
table.four .panel center { min-width: 160px; }
table.five .panel center { min-width: 210px; }
table.six .panel center { min-width: 260px; }
table.seven .panel center { min-width: 310px; }
table.eight .panel center { min-width: 360px; }
table.nine .panel center { min-width: 410px; }
table.ten .panel center { min-width: 460px; }
table.eleven .panel center { min-width: 510px; }
table.twelve .panel center { min-width: 560px; }

.body .columns td.one,
.body .column td.one { width: 8.333333%; }
.body .columns td.two,
.body .column td.two { width: 16.666666%; }
.body .columns td.three,
.body .column td.three { width: 25%; }
.body .columns td.four,
.body .column td.four { width: 33.333333%; }
.body .columns td.five,
.body .column td.five { width: 41.666666%; }
.body .columns td.six,
.body .column td.six { width: 50%; }
.body .columns td.seven,
.body .column td.seven { width: 58.333333%; }
.body .columns td.eight,
.body .column td.eight { width: 66.666666%; }
.body .columns td.nine,
.body .column td.nine { width: 75%; }
.body .columns td.ten,
.body .column td.ten { width: 83.333333%; }
.body .columns td.eleven,
.body .column td.eleven { width: 91.666666%; }
.body .columns td.twelve,
.body .column td.twelve { width: 100%; }

td.offset-by-one { padding-left: 50px; }
td.offset-by-two { padding-left: 100px; }
td.offset-by-three { padding-left: 150px; }
td.offset-by-four { padding-left: 200px; }
td.offset-by-five { padding-left: 250px; }
td.offset-by-six { padding-left: 300px; }
td.offset-by-seven { padding-left: 350px; }
td.offset-by-eight { padding-left: 400px; }
td.offset-by-nine { padding-left: 450px; }
td.offset-by-ten { padding-left: 500px; }
td.offset-by-eleven { padding-left: 550px; }

td.expander {
visibility: hidden;
width: 0px;
padding: 0 !important;
}

table.columns .text-pad,
table.column .text-pad {
padding-left: 10px;
padding-right: 10px;
}

table.columns .left-text-pad,
table.columns .text-pad-left,
table.column .left-text-pa